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;
}

Answer 3

如果您正在寻找一种完全垂直对齐的方法，请查看Stack Overflow问题 Problem with vertical-align: middle; - 我在那里描述了一个解决方案。

如果你想要一个答案，为什么Firebug和Chrome以不同的方式显示，这将会更复杂一些。行高对齐基于字体线渲染，字体可以在浏览器中以非常不同的方式处理。例如，字体平滑和字体粗细可能会使您的页面混乱。

另外，您是否在此页面使用CSS重置？它还包含与字体相关的调整，它可以帮助您克服跨浏览器问题。请参阅 CSS Tools: Reset CSS 。

Answer 4

哎呀，可怕但真实！我只是试图在图标上创建微小的计数气泡 - 这么小，以至于我不得不靠近文本，所以每个像素都计算在内。使行高比文本大小小1倍，使FF和Chrome之间的显示区域变平。

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

4 个答案: