Html 输入字段高于预期值

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

• Firefox15中的37px
• 铬22中的37px
• IE9中的36px

问题：为什么我的输入字段不是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>

​
.输入{
边框：1px实心#000；
字体系列：Arial；
字体大小：12px；
填充：10px；
宽度：200px；
}​

---

更新：定义行高（12px）和设置框大小（边框框）没有帮助-

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

记住盒子模型。

---

这是

框大小调整

CSS

中的

“盒子模型”

的工作原理如下：

宽度+填充+边框

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

高度+填充+边框

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

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

宽度

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

高度

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

用于调整框大小：边框框

---

将

字体大小设置为
12px
并不意味着文本变为12像素高

字体的大小不再是文本行的高度。曾经是排版时使用的金属字体的大小，但现在是字体设计师定义的一个假想值。它通常接近文本高度，但由于文本行之间需要多少空间（对于挂起的字符，如
g
），它在不同字体之间有所不同

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

因此，基本上，当您指定字体大小时，您不能期望在所有浏览器中都获得相同的像素大小。
似乎基于字体设置了行高

在这里，它的字体大小为*1.2，并舍入了我认为的线条高度

正常线高度计算

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

参考原因是浏览器以自己的方式计算内联元素的高度：
“内容区域的高度应基于字体，但本规范未规定如何使用。UA可使用em框或字体的最大升序和降序。”（CSS 2.1，）

使用不同的字体（比如Calibri，如果你有的话），即使使用同一个浏览器，你也可能会得到不同的高度。
Link对我很有用。但是为什么字体大小不能作为副产品给出元素的高度呢？它不是，它来自w3站点，在这里和其他机器上都可以。请尝试关闭浏览器，然后再次打开。同步，这都是Rohit在下面提到的框大小方面继承的。每个浏览器都有自己独特的功能。你的意思是将行高设置为12px吗？这似乎不起作用，见更新的问题。是的，我想这就是原因。但是，设置一个特定的线高度不能解决这个问题吗？我在设置行高（和框大小）时得到了相同的结果-NoelDavies：是的，我意识到设置高度可以解决这个问题，但问题是为什么我需要这样做。因此，将行高设置为固定值（如12px）应该使文本保持12px高，对吗？见更新的问题。