这个测试图像显示了Safari在一个方框内对文本的位置以及Firefox(Safari 5.0.5和Mac OS X 10.6.7的Firefox 5.0.1).请注意,无线网路上的“S”如何在Firefox的顶部对开,而不是Safari.差异似乎取决于使用的字体,其中一些甚至一致地呈现.
我已经读过people saying这是因为font-size和line-height之间的四舍五入问题(通过设置比大小更小的高度来修复),但是我认为这是我的例子,Firefox中的sans-serif / helvetica总是排列在顶部在盒子里.
对我来说,Safari看起来更像Firefox一样,即文本通常在中间一行.
有没有一个很好的方式让他们更一致？我的目标只是符合标准的浏览器.
> NB1：这与垂直对齐无关.
> 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>
解决方法
不幸的是,没有解决这个问题.文本呈现在几乎每个浏览器中都有所不同,甚至在主要浏览器版本之间也有所改变.在某些浏览器中,它由特定的字体渲染系统和操作系统的设置决定.对于一种类型的字体渲染一直存在并且总是会被折中,并且其中的每一种将随不同类型的硬件上的不同类型的显示而改变.
对不起,您必须在浏览器之间使用非像素完美的字体,直到单个浏览器完全垄断,没有可用的显示设置选项的单个操作系统,单个显示器类型和大小以及单个视频卡.换句话说,只要您的网站支持多个设备,浏览器,显示器等,它就不会完美匹配像素.
(Kudos做自己的家庭作业和测试,但是,你的问题在提出问题之前已经很好地研究和思考了,希望在完成这些工作后,我们可以给你一个更好的答案.)
