如何弥补 Webkit 和 Gecko 之间基线渲染的差异？

Question

给定一个链接或任何具有背景颜色的内联元素，我想将文本垂直居中到像素

<a href="#">Hello world</a>

a { line-height: 22px; font-size: 16px; background: #f00; color: #fff; text-decoration: none; }

http://jsfiddle.net/MDdzH/9/

似乎 Firefox 的基线渲染相差一个像素，我想知道如何在不使用嗅探浏览器和注入特定于浏览器的样式表的情况下进行补偿？我很乐意使用以供应商为前缀的解决方案。

Answer 1

跨浏览器基线渲染的差异很可能归结为以下几点：

字体在浏览器之间呈现不同。这可能会导致字距调整和行高略有不同。

另外，我认为有些浏览器会尝试将像素输出到小数位以进行亚像素渲染或类似的事情。这可能会导致浏览器之间出现非常轻微的不连续性。

答案是确保您使用的任何字体 em 输出整数。 看到您的示例使用了整个像素值，我猜这可能是字体渲染造成的。

如果你希望你的链接是一个精确的高度，给它 CSS：

a { 
  display: block;
  height: 22px;
  overflow: hidden; }

这会给它一个精确的高度，而不依赖于字体渲染。