容器WebKit与Firefox中的垂直对齐文本

Question

问题是Firefox和基于WebKit的浏览器似乎在包含在具有均匀高度/行高度且字体大小不均匀(或反之亦然)的元素中时以不同方式对齐文本.我看过一些类似的帖子,但我还没有真正看到我的问题的任何重要解释.

考虑http://alternativeto.net/test2.htm.这是一个非常简单的页面

    .box
    {
        font-size: 15px;
        font-family: Helvetica, Arial;
        background-color: Blue;
        height: 20px;
        width: 60px;
        color: White;
        line-height: 20px;
    }

和

    <div class="box">
        A text.
    </div>

如果您在Chrome和Firefox中打开该页面,您会发现它们以不同的方式对齐文本:http://screencast.com/t/tjgA2d7T

有没有什么办法解决这一问题？是否有任何"文本对齐"属性或我遗漏的东西？

Answer 1

这是由于浏览器处理子像素文本定位的方式不同.如果您的行高为20像素但字体大小为15像素,则文本需要位于距行框顶部2.5个像素处.Gecko实际上就是这样做的(然后根据绘画的需要对抗像素网格进行抗锯齿或捕捉).WebKit在布局期间将位置四舍五入为整数像素.在某些情况下,这两种方法给出的答案相差一个像素.除非你并排比较它们,你怎么能告诉它们有什么不同呢？

在任何情况下,确保你的半前导是一个整数(即行高减去font-size是偶数)将使渲染更加一致,如果你真的需要它.

Answer 2

这是浏览器呈现问题.使用小于给定高度的行高1px,例如:

    .box
{
   background-color: Blue;
   color: White;
   font-family: Helvetica,Arial;
   font-size: 15px;
   height: 18px;
   line-height: 17px;
   width: 60px;
}