Question

我还没有找到解决此问题的明确解决方案，因此我决定创建此主题。有一个非常烦人的Firefox功能：

<!DOCTYPE html>
<html>
<head>
<style>
    div{
        line-height: 0;
        margin: 0;
        padding: 0;
        border: 0;
        width: 31px;
        height: 50px;
        font: 15px Verdana;
        background: #0F0;
    }
</style>

<body>

<div>test</div>

</body>
</html>

结果如下（200％）：

如您所见，Firefox中的顶部填充比其他浏览器中的顶部填充（5px）更大（6px）。怎么解决这个问题？

编辑：任何css重置都无法修复。

Answer 1

在您的css中没有执行默认值规范化时通常就是这种情况，这就是normalize.css和reset样式表等工具出现的原因。此类工具尝试规范化并重置用户代理（浏览器）设置的默认值。

Answer 2

尝试yui-reset。它可以解决这些问题以及跨浏览器的其他不同默认行为。

http://developer.yahoo.com/yui/reset/

Answer 3

把它放在你的CSS之上：

 DIV {  /*let Firefox stick to the padding web standards*/
        -moz-box-sizing:border-box;
        box-sizing:border-box;
        margin:0;
        padding:0;
    }

Firefox顶级填充差异（与其他浏览器相比）

3 个答案: