11

问题在于，当包含在具有均匀高度/行高且字体大小不均匀（反之亦然）的元素中时，基于 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>

显示 Firefox 和 Chrome 之间垂直对齐差异的示例。

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

4

4 回答 4

14

这是由于浏览器处理亚像素文本定位的方式不同。如果你的 line-height 是 20 像素，而 font-size 是 15 像素，那么文本需要放置在距离行框顶部 2.5 像素的位置。Gecko实际上是这样做的（然后在绘画时根据需要消除锯齿或捕捉到像素网格）。WebKit 只是在布局期间将位置四舍五入为整数像素。在某些情况下，这两种方法给出的答案相差一个像素。除非您将它们并排比较，否则您怎么能分辨出它们之间的区别？

在任何情况下，如果你真的需要，确保你的半前导是一个整数（即 line-height 减去 font-size 是偶数）将使渲染更加一致。

于 2011-05-04T12:24:20.647 回答
9

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

    .box
{
   background-color: Blue;
   color: White;
   font-family: Helvetica,Arial;
   font-size: 15px;
   height: 18px;
   line-height: 17px;
   width: 60px;
}
于 2011-05-04T08:29:42.993 回答
1

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

如果你想知道为什么 Firebug 和 Chrome 会以不同的方式显示，这会有点复杂。行高对齐基于字体行渲染，并且可以在浏览器中以非常不同的方式处理字体。例如，font-smoothing 和 font-weight 真的会弄乱你的页面。

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

于 2011-05-04T08:31:45.053 回答
0

呃，可怕但真实！我刚刚遇到了这个问题，试图在一个图标上创建微小的计数气泡——太小了，我不得不紧挨着文本，这样每个像素都被计算在内。使 line-height 比 text-size 小 1 倍，使 FF 和 Chrome 之间的显示字段变平。

于 2011-10-22T02:46:07.937 回答