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

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。有没有人遇到过这个问题？只有适用于 Mac 的 Firefox 才是奇怪的浏览器。我还注意到这是基于字体的；例如，更改为 Arial，到处都能呈现一致的效果。不幸的是，更改字体对我来说不是一个选项。如果可以的话，我想避免创建排版图像。

我很感激任何见解!感谢您的关注!

Answer 1

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

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