【发布时间】：2012-06-16 18:34:11
【问题描述】：
这快把我逼疯了。 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 非常标准：/
【问题讨论】：
-
我在使用 font-face 字体时遇到了这个问题，只能通过在 safari 中简单地设置更小的字体大小来解决这个问题（这是一个 safari 唯一的错误）。肮脏的解决方法，但它让客户高兴
-
这可能是各种浏览器/操作系统使用的不同字体平滑技术。尝试在像素级别上进行匹配是徒劳的。
-
这可能与硬件加速有关。尝试禁用硬件加速，看看是否有任何变化（在 options->advanced 下）
-
@Fidrizers jsfiddle.net/MfDkc 嗯。在 jsfiddle 中工作。让我觉得这实际上是一些奇怪的渲染错误。
标签： html css internet-explorer firefox google-chrome