9

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

在此处输入图像描述

第一个“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。这不应该真正导致会导致这种情况的舍入错误。然而，如果我将 line-height 显式更改为 23px，它就会对齐。我不知道为什么。

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

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

4

1 回答 1

2

在这里查看我之前的答案:: CSS white-space 和 list-style-image 在 Firefox 11+ 中不堆叠

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

在这里你可以找到 reset.css 的许多链接 使用 reset.css 的原因是因为它将所有用户代理（浏览器）css 设置为基本设置，因此它们在不同的浏览器中看起来不会有所不同。

编辑:: 因为 OP 使用了 reset.css 。我无法重现该问题。所以其他原因可能是

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

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

于 2012-06-13T18:26:46.420 回答