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匹配。

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

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

Answer 2

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

Answer 3

我遇到了同样的问题，必须将line-height和padding结合起来才能让事情发挥作用。

Answer 4

只需尝试溢出：隐藏在输入

Answer 5

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

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

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

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

Answer 6

这适用于Chrome＆amp;选择元素上的Firefox：

height: 20px;
padding: 0;

Answer 7

我在 Firefox ， Chrome ＆amp; Opera 浏览器。所以我将线高，高度和字体大小结合起来以获得合适的外观。

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

Firefox和Chrome中的输入高度差异

7 个答案: