Question

所以我得到了这个输入字段，我希望它高34px（边框2px +填充2 * 10px +文本12px），但它最终高于：

Firefox 15中的37px
37px in Chrome 22
36px in IE9

问题：为什么我的输入字段不是34px高？

HTML / CSS

<input type="text" class="input" placeholder="Why is this not 34px high?">

<style>
    .input {
    border: 1px solid #000;
    font-family: Arial;
    font-size: 12px;
    padding: 10px;
    width: 200px;
}
</style>

Fiddle

更新：定义行高（12px）并设置框大小（边框）无效 - updated fiddle

Answer 1

原因是您没有为您创建的文本定义高度，如果将其设置为12，您将看到它的总高度为34px。

请记住盒子模型。 http://www.w3.org/TR/CSS2/images/boxdim.png

Answer 2

这是box-sizing

"box model"中的CSS的工作原理如下：

width + padding + border =框的实际可见/渲染宽度 height + padding + border =框的实际可见/渲染高度

这有点奇怪，但你已经习惯了。在IE 6及更早版本中，当处于“怪癖模式”时，盒子模型的处理方式不同。

width =框的实际可见/渲染宽度 height =框的实际可见/渲染高度

用于box-sizing:border-box

的 more info 的

的 link two 的

Answer 3

将font-size设置为12px并不意味着文字变为12像素高。

字体的大小不再是文本行的高度。一旦它是排版中使用的金属类型的大小，但现在它是字体设计者定义的虚构值。它通常接近文本高度，但由于文本行之间需要多少空间（用于挂起g等字符），因此它在字体之间会有所不同。

此外，字体大小实际上是以磅为单位，因此如果您以像素为单位指定它，浏览器会将其转换为点，并且涉及一些舍入，这可能会因实现而异。

因此，基本上，当您指定字体大小时，您不能指望在所有浏览器中获得相同的像素大小。

Answer 4

似乎基于线条高度设置的字体

这里采用font-size * 1.2并将我认为的行高进行四舍五入。

正常行高计算

告诉用户代理将使用的值设置为＆＃34;合理的＆＃34;值基于元素的字体。该值具有相同的含义。我们建议使用正常的＆＃39;正常值。介于1.0到1.2之间。计算出的值是正常的＆＃39;

参考http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height

Answer 5

原因是浏览器以自己的方式计算内联元素的高度： “内容区域的高度应基于字体，但此规范未指定方式。例如，UA可以使用em-box或字体的最大上升和下降。“（CSS 2.1，clause 10.6.1）。

使用不同的字体（比如Calibri，如果有的话），即使使用相同的浏览器，也可能会有不同的高度。

输入字段高于预期

5 个答案: