给定一个链接或任何具有背景颜色的内联元素，我想将文本垂直居中到像素
<a href="#">Hello world</a>
a {
line-height: 22px;
font-size: 16px;
background: #f00;
color: #fff;
text-decoration: none;
}
Firefox 的基线渲染似乎有一个像素的不同，我想知道如何在不使用嗅探浏览器和注入特定于浏览器的样式表的情况下进行补偿？我很乐意诉诸供应商前缀的解决方案。
跨浏览器基线渲染的差异很可能归结为以下几点：
字体在浏览器之间呈现不同。这可能会导致字距调整和行高略有不同。
另外，我认为某些浏览器会尝试将像素输出到小数位以进行亚像素渲染或类似的操作。这可能会导致浏览器之间的非常轻微的不连续性。
答案是确保您使用的任何字体 em 输出整数。看到您的示例使用整个像素值，我猜这可能取决于字体渲染。
如果你希望你的链接是一个精确的高度，给它 CSS：
a {
display: block;
height: 22px;
overflow: hidden; }
这将给它一个精确的高度，而不依赖于字体渲染。