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

前端之家收集整理的这篇文章主要介绍了css – WebKit与Mozilla垂直对齐字体字体在框中前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这个测试图像显示了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做自己的家庭作业和测试,但是,你的问题在提出问题之前已经很好地研究和思考了,希望在完成这些工作后,我们可以给你一个更好的答案.)

原文链接:https://www.f2er.com/css/216761.html

猜你在找的CSS相关文章