Question

这让我发疯了。 Firefox文本比chrome和ie低1px。这不是html或body上的边距或填充问题，尝试过。似乎也不是一个四舍五入的问题。这是一张图片：

enter image description here

首先“Hello”是Firefox 13，第二个“Hello”是IE9，“Hello World”是Chrome。

这是代码（非常简单）：

<!DOCTYPE html>
<html lang="en-us">
    <head>
        <meta charset="utf-8">
        <!-- Always force latest IE rendering engine and chrome frame -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Pixel Bug?</title>
    <style type="text/css">
        html{
            font-size: 100%;
        }
        body{
            font-size: 1em;
            line-height: 1.5;
            background: white url('images/grid16.png') -4px -6px;
        }
        p{
            margin: 1.5em 0;
        }
    </style>
</head>
<body>
    <p>Hello World!</p>
    <p>Hello World 2!</p>
</body>
</html>

这只是一个错误吗？这里发生了什么？我不想让FireFox只能解决，我只想了解为什么会这样。

修改

经过进一步的研究，这似乎是一个渲染错误，但它仍然让我感到困惑。例如，文本的高度应为24px。哪个不应该真正导致导致这种情况的舍入错误。然而，如果我明确地将行高改为23px，它会排成一行。我不明白为什么。

EDIT2：可能的原因？ https://bugzilla.mozilla.org/show_bug.cgi?id=442139

EDIT3：使用20px字体和40px线高排列。让我觉得这只是渲染bug。这很糟糕，因为16/24非常标准：/

Answer 1

请参阅我之前的答案:: CSS white-space and list-style-image do not stack in Firefox 11+

您没有使用reset.css从而产生问题

Here you can find many links for the reset.css 使用reset.css的原因是因为它会将所有用户代理（浏览器）css设置为基本设置，以便它们在不同的浏览器中看起来不同。

修改:: 由于OP使用了reset.css。我无法重现这个问题。所以其他原因可能是

不同更炫的引擎的字体渲染问题。没有特别修复Read more

硬件问题。 Joel talks about it in his blog.

另外，我同意@steveax的说法。

编辑2 :: 如果你想深入了解它。

提出错误

Try tuning your browser yourself

Firefox文本1px低于chrome和ie

1 个答案: