如何補償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

的差異很可能會下降到一兩件事情：

字體瀏覽器之間呈現不同。這可能會導致非常不同的字距和行高。

此外，我認爲一些瀏覽器嘗試輸出像素到小數位的子像素渲染或類似的東西。這可能會導致瀏覽器間的非常小的不連續性。

答案是確保您使用的任何字體ems輸出整數。 看你的例子使用整個像素值，我想這可能是由於字體渲染。

如果你希望你的鏈接是一個精確的高度，給它的CSS：

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

這會給它不依賴於字體渲染一個精確的高度。