是否有一個CSS文本重置？

Question

你好，我有這樣的問題：

，你可以看到左手邊有是它是如何在Chrome中，右手邊的Firefox截圖。文字高度不一樣。 html的結構很簡單。它只是一個div，其中一個字段集中放置了一個h1標籤。周圍有一個1px的邊框。 h1標籤的高度爲20px，甚至行高爲20px。接下來是一個大小相同的h2標籤。問題在於文本高度。

在Firefox似乎這比Chrome和Safari 1px的低。

我在eric meyers的最新版本中使用css reset。所以它不應該由此造成的。

如果有人有提示幫助我，那將會很棒。

非常感謝。

Answer 1

缺省行高在不同瀏覽器中以及在不同字體大小的不同字體系列中有很大差異。設置一個明確的行高地址。

這是由於瀏覽器處理亞像素文本定位的差異。如果您的行高爲20像素，但字體大小爲15像素，則文本需要位於行框頂部2.5像素處。 Gecko實際上是這樣做的，WebKit只是把位置放到整數像素上。在某些情況下，這兩種方法會給出像素差異的答案。

在任何情況下，如果您真的需要這樣做，確保您的半前一個整數（即行高減去字體大小均勻）將使渲染更加一致。

試試這個：

div h1 { 
    -webkit-padding-before: 1px; 
} 

---

另一種可能的解決方案：

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    div h1 { 
     line-height:19px; 
    } 
}