输入具有相同的CSS高度，但具有不同的渲染高度

Question

我使用CSS将<input>的高度设置为2em，但Google Chrome中的高度呈现方式不同。这是一个小提琴，显示了这一点：http://jsfiddle.net/hA4eD/1/

在我的电脑中，使用Chrome的开发工具，文本输入的高度恰好为32像素，而按钮输入的高度为28.79999 ...像素。如何在不手动调整像素数的情况下使它们相等？

Answer 1

请将webkit外观属性添加为无值...

小提琴：http://jsfiddle.net/nikhilvkd/hA4eD/3/

input{
height:2em;
width:5em;
display:inline-block;
-webkit-appearance: none;/*new property*/
}

Answer 2

问题在于输入具有您没有考虑的固有边界。您可以通过CSS将它们更改为具有相同的边框，但最终会使控件看起来更加丑陋（或者让您专门设置每个输入的边框并相应地调整高度，这意味着您最终将管理所有不同的样式）。

一种选择是使用-webkit-appearance css规则来禁用此功能，正如其他人所建议的那样。或者，您可以设置box-sizing: border-box;告诉CSS您指定的高度应该是输入的整个高度，包括边框。