Question

Glyphs in Box

此测试图像显示了Safari与Firefox（Safari 5.0.5和适用于Mac OS X 10.6.7的Firefox 5.0.1）在文本框内放置文本的方式截然不同。请注意sans-serif的“S”如何在Firefox而不是Safari中排在最前面。差异似乎取决于使用的字体，其中一些甚至一致地呈现。

我看过people saying这是因为font-size和line-height之间的舍入问题（并通过设置较小的高度而不是大小来修复），但我认为我的例子反驳了Firefox中的sans-serif / helvetica总是在框中排在最前面。

对我而言，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>

Answer 1

不幸的是，没有解决这个问题的办法。几乎在每个浏览器中文本呈现都有所不同，甚至在主要浏览器版本之间也会发生变化。在某些浏览器中，它由特定字体呈现系统和来自OS的设置确定。对于另一种类型的字体渲染，一直存在并且总是会有折衷，并且每种字体都会随着不同类型的硬件上的不同类型的显示而改变。

对不起，您需要在浏览器之间使用非像素完美字体，直到单个浏览器完全垄断，单个操作系统没有可用的显示设置选择，单个显示器类型和大小，以及单个显卡。换句话说，只要您的网站支持多个设备，浏览器，显示器等，它就永远不会完美匹配像素。

（尽管你做了自己的功课和测试，但感谢你的问题。在提问之前你的问题经过深入研究和思考。我希望在完成所有这些工作之后我们能给你一个更好的答案。）

Answer 2

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

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

你可以找到解释＆amp;这里的代码：http://meyerweb.com/eric/tools/css/reset/

我希望这会对你有帮助！

WebKit与Mozilla在框中垂直对齐字体字形

2 个答案: