Firefox 中可能的输入填充错误答案

【问题标题】：Possible input padding bug in FirefoxFirefox 中可能的输入填充错误
【发布时间】：2013-07-12 19:56:12
【问题描述】：

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

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

这个“错误”可能是因为我正在使用谷歌网络字体，但我想知道你们认为问题是什么。

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

我试过了：

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

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

【问题讨论】：

标签： input padding font-size css

【解决方案1】：

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

但是这种行为确实从 Firefox 26（我更新之前的最后一个版本）中没有左右填充和在 Firefox 29 中（就像在 IE11 中一样）中两侧都有默认的 1px 改变了。

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

也许你应该在元素上使用一个固定的高度，而不是依靠填充和字体大小来计算高度：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 上使用它没有发现任何区别

【讨论】：

是的，我必须设置 max-height:50px;对于 .enter-price {}

【解决方案4】：

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

【讨论】：