Firefox 和 Chrome 中的输入高度差异

Question

为什么 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;
}

Answer 1

问题本质上是line-height。

Chrome 看到的 line-height 与它看到的 height 非常相似，而 Firefox 则不然。

向输入添加高度应该可以解决问题，但您应该小心 line-height 和 height 匹配。

例如：高度：20px；行高：20px；。

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

Answer 2

我通常使用 padding 而不是 height 来推动输入的总高度。这样做，我就不必纠结于 Chrome 和 Firefox 的不同解释。

Answer 3

只需尝试溢出：隐藏输入

Answer 4

我认为这与您为输入设置字体样式的方式有关。

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

每个浏览器都有自己的 sans-serif 渲染方式，因为它实际上不是一种字体。

因此，如果没有特定的字体集，您可能会出现一些不一致的情况。

Answer 5

这应该适用于 Chrome & Firefox 在选择元素上：

height: 20px;
padding: 0;

Answer 6

我遇到了同样的问题，必须结合 line-height 和 padding 才能使事情正常进行。

Answer 7

我在 Firefox 、 Chrome 和 Chrome 上遇到了相同的输入行高问题。 Opera 浏览器。所以我结合了 line-height 、 height 和 font-size 以获得合适的外观。

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