html - 输入字段高于预期

Question

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

• 在 Firefox 15 中为 37px
• 在 Chrome 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>

Fiddle

更新:定义行高 (12px) 和设置框大小 (border-box) 没有帮助 - updated fiddle

Answer 1

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

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