Firefox文本1px低于chrome和ie

Question

Firefox文本1px低于chrome和ie

Pea*_*ion 9 html css firefox internet-explorer google-chrome

这真让我抓狂.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>

Run Code Online (Sandbox Code Playgroud)

这只是一个错误吗？这里发生了什么？我不希望FireFox只能解决,我只想了解为什么会这样.

编辑:

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

编辑2:可能的原因？https://bugzilla.mozilla.org/show_bug.cgi?id=442139

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

Answer 1

Ash*_*pta 2

请参阅我之前的回答： CSS 空白和列表样式图像在 Firefox 11+ 中不堆叠

您没有使用reset.css，因此会产生问题

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

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

不同浏览器引擎的字体渲染问题。没有特别修复阅读更多
硬件问题。乔尔在他的博客中谈到了这一点。

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

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

提出错误
尝试自己调整浏览器

恕我直言，CSS 重置是解决问题的一种霰弹枪方法。我想知道的是需要“重置”哪个特定的 CSS 属性才能解决这个问题？但不知何故，我认为这与字体/浏览器的关系比与 CSS 的关系更大。 (3认同)
请不要认为 CSS 重置是解决一切问题的魔杖。如果添加 CSS 重置对您有帮助，请找出有问题的 CSS 属性并将其作为答案发布；否则不要发布任何内容。 (3认同)

归档时间：	13 年，8 月前
查看次数：	2459 次
最近记录：	13 年，8 月前