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>
在 Mac 版 Firefox 中，文本基线高于其他浏览器（包括 Windows 版 Firefox）。以前有人遇到过这个问题吗？只有 Mac 版 Firefox 才是比较奇怪的浏览器。我还注意到这是基于字体的；例如，更改为 Arial 可以在任何地方呈现一致的效果。不幸的是，更改字体对我来说不是一个选择。如果可以的话，我想避免创建排版图像。
我很感激任何见解！感谢您的浏览！
Noticing a strange rendering anomaly in Firefox 3.5/3.6 (haven't tried other versions) in Mac OS X. Looking around, I've seen similar issues reported and addressed, but most were surrounding CSS line-height being set to normal as opposed to a unit measurement.
Take the following code:
<style>
h1{
background-color:#f00;
font-size:40px;
line-height:40px;
}
</style>
<h1>This is a test</h1>
In Firefox for Mac, the text baseline sits higher than in the other browsers -- including Firefox for Windows. Has anyone confronted this issue before? It's only Firefox for Mac that is the odd browser out. I also noticed that this is font-based; changing to Arial, for instance, renders consistently everywhere. Unfortunately, changing font is not an option for me. And I'd like to avoid creating images of typography if I can.
I'm grateful for any insight! Thanks for taking a look!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
您提供了一个非常引人注目的示例，展示了 Mac 版 Firefox 与其他浏览器上的字体渲染之间的细微差别。我想说 Mac 上的 FF 在这里出错了，因为即使设置
vertical-align: benchmark;也不会改变结果。也就是说，绝对没有理由在这里使用图像来模拟任何一种浏览器的渲染。网站不必在所有浏览器中看起来都一样。
You've presented a very compelling example of the slight differences between the font rendering on on Firefox for Mac versus other browsers. I'd say FF on Mac is getting it wrong here as even setting
vertical-align: baseline;doesn't change the result.That said, there's absolutely no reason to to use images here to emulate any one browser's rendering. A website need not look the same in all browsers.
出现此问题的原因可能是 Mac 和 Safari 对排版的调整远远超过任何其他浏览器或操作系统。它更有可能正确显示应该显示的字体。多年来，我无数次读到过有关此内容的内容，但不幸的是，除此之外我什么也想不起来。我确信有人会提供一个链接来进一步解释这一点。
The issue probably arises due to Mac and Safari tuned to typography far more than any other browser or operating system. It's more likely to correctly display fonts as they should be displayed. I've read about this on countless occasions over the years but, unfortunately, can't recall any of it beyond that. I'm sure someone will come along with a link that explains this further.
我知道这是一个老问题，但我在寻找同一问题的解决方法时偶然发现了它。从大量的研究和测试来看，它似乎是“Windows 对抗世界其他地方”类型的东西之一（惊喜！）所以这是我的 jQuery 修复...
然后我只是用
html 定位 h1。 windows h1修复与 Windows 上 css 的差异。将来可能会帮助某人！
I know this is an old question but I stumbled upon it when looking for a workaround for the same problem. From a lot of research and testing it appears to be one of those 'Windows against the rest of the world' type things (surprise surprise!) so here's my jQuery fix...
Then I just targetted the h1 with
html.windows h1to fix the difference with css on Windows.Might help someone in the future!