该按钮仍然使用 Quirks 模式进行高度估计。 在 Quirks 模式下，边框是在元素长度内估计的，而不是像标准模式中那样在元素长度之外（按钮的高度包括边框的高度，而文本字段的高度则不包括在内。）
表单是网页中的重要元素，也是出现频率较高的元素。 如何使形式美观极其重要。 首先，我们需要解决一个实际问题css两边对齐，那就是文本框与按钮的错位。 对这个看似简单的问题的追寻css两边对齐，可以揭示出许多我们从未想到过的原理。 按钮（button）的高分辨率问题是造成问题的根本原因。 正确的代码示例如下所示。
文本应包含在label标签中，并设置列宽，否则文本将与文本框顶部对齐。 文本框应设置vertical-align:middle; 否则，文本框将与按钮的顶部对齐。 按钮的英文字符垂直居中。 要设置高度和列宽，行高必须大于高度。
设置input标签的样式，代码如下：
html代码
CSS代码
#textfield{边框：1px实心#000;高度：16px;}
#按钮{背景：#FFF;颜色：#000;边框：1px实心#000;高度：20px;}
文本字段的高度设置为16px，按钮的高度需要设置为20px。 按照 IE 标准正常对齐，但在 Firefox 中，文本字段和键的高度是交错的。
这时，通过在input标签上设置左浮动（float: left），就可以兼容Firefox了。 CSS代码如下：
#textfield{边框：1px实心#000;高度：16px;浮动：左;}
#按钮{背景：#FFF；颜色：#000；边框：1px实心#000；高度：20px；浮动：左；}
当然，CSS Hack可以用来更有针对性地控制浏览器性能。
该按钮仍然使用 Quirks 模式进行高度估计。 在 Quirks 模式下，边框是在元素长度内估计的，而不是像标准模式那样在元素长度之外，因此在文本和按钮上都设置边框会导致按钮高度小于文本的现象。 所以文本框应该与按钮按钮对齐，并且按钮的高度应该低于文本文本的高度。 （按钮的高度包括边框的高度，而文本框的高度不包括边框的高度。）
文/丁向明
做一个有博客的Web前端自媒体人，专注Web后端开发，注重用户体验，加我QQ/微信交流：6135833
发表评论