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.以前有人遇到过这个问题吗？它只是Firefox for Mac,这是奇怪的浏览器.我也注意到这是基于字体的; 例如,改为Arial,无处不在.不幸的是,改变字体对我来说不是一个选择.如果可以的话,我想避免创建排版图像.

我很感激任何见解!谢谢参观!

Answer 1

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

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