注意到 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,到处都能呈现一致的效果。不幸的是,更改字体对我来说不是一个选项。如果可以的话,我想避免创建排版图像。
我很感激任何见解!感谢您的关注!
最佳答案
您提供了一个非常引人注目的示例,说明 Firefox for Mac 与其他浏览器的字体呈现之间存在细微差别。我会说 Mac 上的 FF 在这里弄错了,因为即使设置 vertical-align: baseline;
也不会改变结果。
也就是说,绝对没有理由在这里使用图像来模拟任何浏览器的呈现。一个网站不需要在所有浏览器中看起来都一样。
关于fonts - Firefox/Mac 和 Safari/Mac 或 Firefox/Win 之间的字体基线不一致,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2051736/