Firefox和Chrome中的输入高度差异
为什么Chrome中的高度大于输入的Firefox
看到这里的例子http://jsfiddle.net/jitendravyas/89Msh/1/
select, input, textarea, button {
font: 99% sans-serif;
}
input, select {
vertical-align: middle;
}
body, select, input, textarea {
color: #444444;
}
button, input, select, textarea {
margin: 0;
}
input, textarea {
font-family: inherit;
line-height: 1.5;
}
input {
border: 0 none;
font-size: 32px;
line-height: 1.1;
margin-right: 29px;
padding: 3px 3px 0;
width: 206px;
border-radius: 7px;
}
问题基本上是line-height 。
Chrome浏览器看到的line-height很像它看到的height而Firefox则没有。
为输入添加高度应该可以解决问题，但是您应该注意line-height和height匹配。
例如： height: 20px; line-height: 20px; height: 20px; line-height: 20px; 。
http://jsfiddle.net/e2agj/1/ - 最后一个示例输入是正确的。
我通常使用padding而不是高度来推入输入的总高度。 这样做，我不必为Chrome和Firefox的不同解释而战斗。
我有同样的问题，不得不结合line-height和padding ，使事情工作。