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