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

Question

问题在于，当包含在具有均匀高度/行高且字体大小不均匀的元素中时，基于 Firefox 和 WebKit 的浏览器似乎会以不同的方式垂直对齐文本（反之亦然）。我看过一些类似的帖子，但我还没有真正看到对我的问题有任何很好的解释。

考虑以下示例：

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

有什么方法可以解决这个问题吗？是否有任何“文本对齐”属性或我错过的东西？

Answer 1

这是由于浏览器处理子像素文本定位的方式存在差异。如果行高为 20 像素，但字体大小为 15 像素，则文本需要放置在距行框顶部 2.5 像素的位置。 Gecko 实际上就是这样做的（然后根据绘画需要进行抗锯齿或捕捉到像素网格）。 WebKit 只是在布局期间将位置舍入为整数像素。在某些情况下，这两种方法给出的答案相差一个像素。除非你将它们并排比较，否则你怎么能看出它们之间存在差异呢？

无论如何，如果您确实需要的话，请确保您的半行距是整数（即行高减去字体大小是偶数）将使渲染更加一致。

Answer 2

这是浏览器渲染问题。使用比给定高度小 1px 的 line-height，例如：

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

Answer 3

如果您正在寻找一种精确垂直对齐的方法，请查看 Stack Overflow 问题垂直对齐问题：中间； - 我在那里描述了一个解决方案。

如果你想知道为什么 Firebug 和 Chrome 的显示方式不同，这会有点复杂。行高对齐基于字体行渲染，并且可以在浏览器中以非常不同的方式处理字体。例如，字体平滑和字体粗细确实会扰乱您的页面。

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

Answer 4

呃，可怕但真实！我刚刚遇到了这个问题，试图在图标上创建微小的计数气泡 - 太小了，我必须紧挨着文本，这样每个像素都会被计数。使行高比文本大小小 1 倍可以平衡 FF 和 Chrome 之间的显示字段。