Question

在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>

在Firefox for Mac中，文本基线高于其他浏览器 - 包括Firefox for Windows。以前有人遇到过这个问题吗？它只是Firefox for Mac，这是奇怪的浏览器。我也注意到这是基于字体的;例如，改为Arial，无处不在。不幸的是，改变字体对我来说不是一个选择。如果可以的话，我想避免创建排版图像。

我很感激任何见解！谢谢你看看！

Answer 1

您已经提供了一个非常引人注目的示例，说明Firefox for Mac上的字体呈现与其他浏览器之间的细微差别。我说Mac上的FF在这里弄错了，因为即使设置vertical-align: baseline;也不会改变结果。

那就是说，绝对没有理由在这里使用图像来模拟任何一个浏览器的渲染。在所有浏览器中，网站看起来都不一样。

Answer 2

问题可能是由于Mac和Safari调整到排版比任何其他浏览器或操作系统更多。它更可能正确显示应显示的字体。多年来，我已经无数次地读到过这个，但不幸的是，除此之外，我不记得其中的任何一个。我相信有人会提供一个可以进一步解释这一点的链接。

Answer 3

我知道这是一个老问题，但在寻找同一问题的解决方法时我偶然发现了它。从大量的研究和测试来看，它似乎是针对世界其他地区的Windows之一。输入内容（惊喜！）所以这里是我的jQuery修复...

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

然后我只用h html.windows h1定位h1来修复Windows上与css的区别。

将来可能会帮助某人！

Firefox / Mac和Safari / Mac或Firefox / Win之间字体的基线不一致

3 个答案: