WebKit vs Mozilla 字体字形在框中的垂直对齐方式答案

【问题标题】：WebKit vs Mozilla vertical alignment of font glyphs in boxWebKit vs Mozilla 字体字形在框中的垂直对齐方式
【发布时间】：2011-10-05 06:34:49
【问题描述】：

此测试图像显示了 Safari 与 Firefox（Mac OS X 10.6.7 的 Safari 5.0.5 和 Firefox 5.0.1）在文本框中的位置差异有多大。请注意，sans-serif 的“S”在 Firefox 而不是 Safari 中是如何与框的顶部对接的。差异似乎因所使用的字体而异，有些甚至是一致呈现的。

我读过people saying，这是因为font-size 和line-height 之间的舍入问题（并通过设置比大小更小的高度来解决），但我认为我的例子证明了无衬线/黑体在 Firefox 中始终对齐框的顶部。

在我看来，Safari 似乎比 Firefox 更正确，即文本通常更多地位于中间线附近。

有没有让它们更加一致的好方法？我的目标只是符合标准的浏览器。

NB1：这与vertical-align 无关。
NB2：我调查了similar problem in the past，但没有完全令人满意的结果。

我的测试代码：http://jsbin.com/omaboc

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <style type="text/css">
            body {
              font-size: 50px;
              line-height: 1em;
            }
            div {
            background: #b5e260;
                margin-bottom: 5px;
              }
        </style>
    </head>
    <body>
        <div style="font-family: sans-serif">Some text @ this box</div>
        <div style="font-family: serif">Some text @ this box</div>
        <div style="font-family: arial">Some text @ this box</div>
        <div style="font-family: helvetica">Some text @ this box</div>
        <div style="font-family: courier">Some text @ this box</div>
        <div style="font-family: georgia">Some text @ this box</div>
    </body>
</html>

【问题讨论】：

在 Windows 7 上不会发生同样的问题，请参阅：i.stack.imgur.com/xQmTe.gif
令人兴奋。剧情变厚了！ +1 用于 GIF 动画 ;)
查看这条小狗的公认答案：stackoverflow.com/questions/7155174/…
这完全是垃圾，无法设计。我感觉到你的痛苦
我也遇到了同样的问题jsfiddle.net/y5ofqfn7/1firefox和safari的位置差是7px

标签： css html webkit mozilla vertical-alignment

【解决方案1】：

很遗憾，这个问题没有解决方案。几乎每个浏览器中的文本呈现方式都不同，甚至在主要浏览器版本之间它有时也会发生变化。在某些浏览器中，它由特定的字体渲染系统和操作系统的设置决定。一种字体渲染与另一种字体渲染一直存在并且总是会进行权衡，并且每一种都会随着不同类型硬件上的不同类型显示器而改变。

抱歉，您将不得不在浏览器之间使用非像素完美字体，直到单一浏览器完全垄断，单一操作系统没有可用的显示设置选项，单一显示器类型和尺寸，以及单一显卡。换句话说，只要您的网站支持多种设备、浏览器、显示器等，它就永远不会完美匹配像素。

（感谢您先完成自己的作业和测试。您的问题在提出之前经过了充分的研究和思考。我希望我们能够在完成所有工作后给您一个更好的答案。）

【讨论】：

【解决方案2】：

您是否尝试过使用样式表文件顶部的重置？

重置样式表的目标是减少浏览器在默认行高、页边距和标题字体大小等方面的不一致。

你可以在这里找到解释和代码：http://meyerweb.com/eric/tools/css/reset/

希望对你有帮助！

【讨论】：

好的，谢谢。我确实尝试过 Meyer 重置，但没有任何成功。