在Firefox和Chrome中输入框高度不同

Question

为什么在Chrome中input元素的高度比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;
}

- Jitendra Vyas

---

尝试重置输入框的 CSS 属性，我的意思是将边距和填充重置为 0。尝试一下，我不确定。 - Jaison Justus

Answer 1

问题实际上在于 line-height。

Chrome将line-height看作像height一样，而Firefox不这样做。

添加height到输入框中应该可以解决问题，但是你需要小心确保你的line-height和height匹配。

例如：height: 20px; line-height: 20px;。

http://jsfiddle.net/e2agj/1/ - 最后一个示例输入是正确的。

- Joonas

---

谢谢解释。我加了高度和行高，问题解决了。 - Jitendra Vyas

Answer 2

只需在输入框上尝试使用overflow:hidden即可。

- Raa Vijay

Answer 3

我通常使用padding而不是高度来推动输入框的总高度。这样做，我就不必为Chrome和Firefox的不同解释而奋斗。

- Patrick Hammer

Answer 4

我认为这与您为 input 标签设置的 font 样式有关。

select, input, textarea, button {
    font: 99% sans-serif;
}

每个浏览器都有自己的渲染方式来显示 sans-serif，因为它并不是真正的字体。

因此，如果没有特定的字体集，您可能会遇到一些不一致性。

- Jason Gennaro

---

我认为这不是因为这里大小相同：http://jsfiddle.net/jitendravyas/4wfvD/1/ - Jitendra Vyas

Answer 5

这应该在Chrome和Firefox上对选择元素有效：

height: 20px;
padding: 0;

- dh1tw

Answer 6

我曾遇到同样的问题，不得不同时使用line-height和padding来解决这个问题。

- Guillaume Gautier

Answer 7

我曾经在Firefox、Chrome和Opera浏览器中遇到过同样的输入行高问题。因此，我结合了行高、高度和字体大小来获得适当的外观。

input {                   
        line-height: 45px;
        height: 45px;
        font-size: 45px;
      }

- Yash Vekaria