文本在容器中的垂直对齐：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>

有没有办法解决这个问题？我是否错过了任何"text-align"属性或其他东西？

- Olaj

Answer 1

这是因为浏览器在处理子像素文本定位方面存在差异。如果您的行高是20个像素，但字体大小是15个像素，则文本需要距离行框顶部2.5个像素进行定位。Gecko实际上执行了该操作（然后根据需要进行抗锯齿处理或对齐到像素网格进行绘制）。WebKit则在布局期间将位置四舍五入到整数像素。在某些情况下，这两种方法给出的答案可能相差一个像素。除非你将它们并排比较，否则怎么能知道它们之间有什么区别呢？

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

- Boris Zbarsky

Answer 2

这是浏览器渲染问题。使用比给定高度小1像素的行高，例如：

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

- Raheel Ayub

---

这个很有效，但只适用于非input/button元素。我还没有确切地弄清楚为什么，但在类型为按钮、提交或重置的输入元素上设置固定高度会设置元素的外宽度，而不是内宽度，这与其他标准元素（包括a、span和div）不同。 - Joey T

Answer 3

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

如果您想知道为什么 Firebug 和 Chrome 显示不同，这会更加复杂。行高对齐基于字体线渲染，而字体可以在浏览器中以非常不同的方式处理。例如，字体平滑和字重可能会影响您的页面。

此外，您是否在此页面上使用 CSS 重置？它也包含与字体相关的调整，并且可能有助于您克服跨浏览器问题。请参考CSS Tools: Reset CSS。

- vlad saling

Answer 4

哎呀，虽然很糟糕但却是真的！我刚刚遇到了这个问题，试图在图标上创建微小的计数气泡 - 太小了，以至于我必须靠近文本，以便每个像素都被计算。将行高设置为比文本大小少1倍，可以使FF和Chrome之间的显示字段水平对齐。

- mahalie

---

哈哈，我和你处于同样的情况——正在制作“小气泡计数器”（类似评论数量之类的东西），确实一个像素的偏差是明显可见的。 - Camilo Martin