Fonts Firefox/Mac与Safari/Mac或Firefox/Win之间字体基线不一致

注意到Mac OS X中Firefox 3.5/3.6（还没有尝试过其他版本）中出现了一个奇怪的渲染异常。环顾四周，我看到了类似的问题报告和解决，但大多数都是围绕CSS线条高度设置为正常而不是单位测量

以下面的代码为例：

<style>
    h1{
        background-color:#f00;
        font-size:40px;
        line-height:40px;
    }
</style>

<h1>This is a test</h1>

h1{
背景色：#f00；
字体大小：40px；
线高：40px；
}
这是一个测试

在Firefox for Mac中，文本基线高于其他浏览器，包括Firefox for Windows。以前有人遇到过这个问题吗？只有Mac版的Firefox是一款与众不同的浏览器。我还注意到这是基于字体的；例如，更改为Arial时，各地的渲染效果都是一致的。不幸的是，改变字体不是我的选择。如果可以的话，我想避免创建排版图像

---

我很感激你的洞察力！谢谢你看

您已经给出了一个非常引人注目的例子，说明Mac版Firefox上的字体呈现与其他浏览器上的字体呈现略有不同。我想说Mac上的FF在这里是错误的，甚至设置

vertical align:baseline不会更改结果

也就是说，这里绝对没有理由使用图像来模拟任何浏览器的渲染。一个网站不必在所有浏览器中看起来都一样。
这个问题可能是由于Mac和Safari比任何其他浏览器或操作系统都更倾向于排版。它更有可能正确地显示字体。多年来，我在无数场合读到过这一点，但不幸的是，除此之外，我再也记不起了。我相信有人会提供一个链接来进一步解释这一点。
我知道这是一个老问题，但我在寻找解决同一问题的方法时偶然发现了它。从大量的研究和测试来看，它似乎是一个“与世界其他地方对抗的窗口”类型的东西（惊喜！），所以这里是我的jQuery修复程序

var OSName="";
if (navigator.appVersion.indexOf("Win")!=-1) OSName="windows";
$('html').addClass(OSName);

然后，我用
html.windowsh1
将h1作为目标，以修复与css在windows上的差异

将来可能会帮助别人