Css WebKit与Mozilla字体字形在方框中的垂直对齐_Css_Html_Webkit_Mozilla_Vertical Alignment

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

css html

Css WebKit与Mozilla字体字形在方框中的垂直对齐,css,html,webkit,mozilla,vertical-alignment,Css,Html,Webkit,Mozilla,Vertical Alignment,此测试图像显示了Safari与Firefox（适用于MacOSX 10.6.7的Safari 5.0.5和Firefox 5.0.1）在框中放置文本的差异有多大。请注意，在Firefox中，sans serif的“S”是如何连接到盒子顶部的，而不是Safari。差异似乎因所使用的字体而异，有些字体甚至是一致呈现的我曾读到，这是因为字体大小和行高之间存在舍入问题（通过设置小于大小的高度来修复），但我认为Firefox中的sans serif/helvetica始终与方框顶部对齐的示例证明了这一点

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

我曾读到，这是因为

字体大小

和

行高

之间存在舍入问题（通过设置小于大小的高度来修复），但我认为Firefox中的sans serif/helvetica始终与方框顶部对齐的示例证明了这一点

在我看来，Safari比Firefox更准确，也就是说，文本通常更接近中间线

有没有一个好办法让他们更一致？我的目标是只有符合标准的浏览器

NB1：这与垂直对齐无关
NB2：我调查了一份没有完全令人满意结果的报告

我的测试代码：


身体{
字体大小：50px；
线高：1米；
}
div{
背景：#b5e260；
边缘底部：5px；
}
此框中有一些文本
此框中有一些文本
此框中有一些文本
此框中有一些文本
此框中有一些文本
此框中有一些文本

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

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

您可以在此处找到解释和代码：

我希望这对你有帮助

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

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

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

同样的问题在Windows 7上不会发生，请参阅：激动人心。情节越来越复杂了+1用于GIF动画；）看看这只小狗的公认答案：这完全是垃圾，不可能设计出来。我觉得你很痛苦我也有同样的问题firefox和safari的位置差异是7px是的，谢谢。我确实尝试过迈耶重置，但没有成功。

<!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>