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

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

a{
线高：22px；
字体大小：16px；
背景：#f00；
颜色：#fff；
文字装饰：无；
}

---

Firefox的基线呈现似乎只有一个像素不同，我想知道如何在不嗅探浏览器和注入特定于浏览器的样式表的情况下进行补偿？我很乐意采用供应商提供的带前缀的解决方案。

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

不同浏览器的字体呈现方式不同。这可能会导致字距和行高略有不同

此外，我认为有些浏览器会尝试将像素输出到小数点，以便进行亚像素渲染或类似的操作。这可能会导致浏览器之间出现非常轻微的中断

答案是确保您使用的任何字体都输出整数。 鉴于您的示例使用了整个像素值，我想这可能是字体渲染的结果

如果希望链接的高度精确，请使用CSS：

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

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