Question

我的页面上有三个主要元素。两个跨度和一个输入字段。

所有三个元素都具有相同的填充和字体大小，但输入字段比两个跨度高一个像素（在Firefox中）。它在Chrome中看起来非常好。

这个＆＃34; bug＆＃34;可能是因为我使用谷歌网络字体，但我想知道你们认为这个问题是什么。

Here's the fiddle 在Chrome和Firefox中打开并进行比较！

我试过了：

vertical-align: top; (middle, and bottom)
max-height: 50px;
line-height:;
overflow: hidden;

我还尝试更改输入字段的字体大小，然后修复Firefox中的问题，然后Chrome中出现问题......它永远不会结束！

Answer 1

也许你应该在元素上使用固定的高度，而不是依靠填充和字体大小来计算高度：http://jsfiddle.net/sN7aH/

#amount {
    font-size: 18px;
    background-color: #fcfcfd;
    font-family:'Montserrat', sans-serif;
    color: #bbc2cb;
    float: left;
    width: 312px;
    height: 50px;
}

我认为在ff和chrome

上使用它没有区别

Answer 2

.enter-price {
    max-height: 50px;
}

需要强制允许的高度。问题解决了。

Answer 3

使用检查器查看每个浏览器应用于该元素的默认样式。然后你可以相应地重新设置。

Answer 4

最新的Firefox版本发生了变化。它现在使用与Internet Explorer 11相同的填充。我想这是一个错误，现在得到修复。但我无法在更改日志中找到错误修正。

但是这种行为肯定会改变，因为在Firefox 26中没有左右填充（我在更新之前的最新版本），并且在Firefox 29的两侧都有默认的1px（就像在IE11中一样）。

有人可以为此指出一些更改日志的链接吗？谢谢！

Firefox中可能的输入填充错误

4 个答案: