这真让我抓狂. 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>
这只是一个bug吗？这里发生了什么？我不希望FireFox只能解决,我只想了解为什么会这样.
编辑：
经过进一步的研究,这似乎是一个渲染错误,但它仍然让我感到困惑.例如,文本的高度应为24px.哪个不应该真正导致导致这种情况的舍入错误.然而,如果我明确地将行高改为23px,它会排成一行.我不知道为什么.
编辑2：可能的原因？ https://bugzilla.mozilla.org/show_bug.cgi?id=442139
EDIT3：使用20px字体和40px行高排列.让我觉得这只是渲染bug.这很糟糕,因为16/24非常标准：/
解决方法
在这里看到我之前的答案::
CSS white-space and list-style-image do not stack in Firefox 11+
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 ::
如果你想深入了解它.
