CSS Firefox 和 Chrome 中的输入高度差异
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7229568/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
input height differences in Firefox and Chrome
提问by Jitendra Vyas
Why height in Chrome is bigger than Firefox of input
为什么 Chrome 中的高度比输入的 Firefox 大
See example here http://jsfiddle.net/jitendravyas/89Msh/1/
请参阅此处的示例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;
}
回答by Joonas
The problem is essentially line-height.
问题本质上是line-height。
Chrome sees line-heightmuch like it sees heightand Firefox doesn't.
Chrome 看到line-height的很像它看到的，height而 Firefox 则没有。
Adding height to the input should solve the problem, though you should be careful that your line-heightand heightmatch.
向输入添加高度应该可以解决问题，但您应该注意您的line-height和height匹配。
For example: height: 20px; line-height: 20px;.
例如：height: 20px; line-height: 20px;。
http://jsfiddle.net/e2agj/1/- Last example input is the correct one.
http://jsfiddle.net/e2agj/1/- 最后一个示例输入是正确的。
回答by Raa Vijay
Simply try overflow:hidden on input
只需尝试溢出：隐藏在输入
回答by Guillaume Gautier
I had the same problem and had to combine line-heightAND paddingto make things work.
我遇到了同样的问题，必须结合line-heightANDpadding才能使事情发挥作用。
回答by Patrick Hammer
I usually use paddinginstead of height to push the total height of the input. Doing so, I do not have to fight around with the different interpretations of Chrome and Firefox.
我通常使用padding而不是高度来推动输入的总高度。这样做，我不必与 Chrome 和 Firefox 的不同解释争吵。
回答by dh1tw
This should work in Chrome & Firefox on select elements:
这应该适用于 Chrome 和 Firefox 的选定元素：
height: 20px;
padding: 0;
回答by Jason Gennaro
I think it has to do with the way you styled the fontfor the input.
我认为这与您font为input.
select, input, textarea, button {
font: 99% sans-serif;
}
Each browser has its own rendering for sans-serif, as that is really not a font.
每个浏览器都有自己的 渲染sans-serif，因为它实际上不是一种字体。
Therefore, without a specific font set, you could expect some inconsistencies.
因此，如果没有特定的字体集，您可能会出现一些不一致的情况。
回答by Yash Vekaria
I had gone throught same input line-height problem across Firefox, Chrome& Operabrowsers. So I combined line-height , height and font-size for the appropriate look.
我在Firefox、Chrome和Opera浏览器中遇到了相同的输入行高问题。所以我结合了 line-height 、 height 和 font-size 以获得适当的外观。
input {
line-height: 45px;
height: 45px;
font-size: 45px;
}
