7

So I got this input field that I expect to be 34px high (border 2px + padding 2 * 10px + text 12px), but it ends up higher than that:

  • 37px in Firefox 15
  • 37px in Chrome 22
  • 36px in IE9

Question: why is my input field not 34px high?

The 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

Update: Defining line-height (12px) and setting box-sizing (border-box) does not help - updated fiddle

4

5 回答 5

2

这是box-sizing

"box model"inCSS作品是这样的：

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

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

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

曾经box-sizing:border-box

更多信息

链接二

于 2012-10-19T12:25:32.210 回答
2

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

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

于 2012-10-19T12:21:53.687 回答
1

似乎根据字体设置了行高

这里它需要 font-size * 1.2 并舍入我认为的 line-height 。

法线高度计算

告诉用户代理根据元素的字体将使用的值设置为“合理”的值。该值的含义与 相同。我们建议使用 1.0 到 1.2 之间的“正常”值。计算值是“正常”。

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

于 2012-10-19T12:34:12.790 回答
1

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

字体的大小不再是文本行的高度。曾经是排版中使用的金属类型的大小，但现在它是字体设计师定义的虚构值。它通常接近文本高度，但由于文本行之间需要多少空间（对于悬挂字符，如g），它会因字体而异。

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

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

于 2012-10-19T12:30:52.510 回答
0

原因是浏览器以自己的方式计算内联元素的高度：“内容区域的高度应该基于字体，但本规范没有具体说明如何。例如，UA 可以使用 em-box 或字体的最大升序和降序。” （CSS 2.1，第 10.6.1 条）。

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

于 2012-10-19T13:55:30.340 回答