Chrome和Firefox的元素位置不同

Question

這是一個我以前曾問過的問題，但我還沒有找到任何解決方案。

在Firefox和Chrome（或Safari而不是Chrome瀏覽器）中打開我的jsfiddle。如果仔細查看字母'y'，則可以看到Firefox和section1-div的下邊框之間有一個或兩個額外的像素，與其他兩個像素中的其中一個相比。

我已經在大多數元素上設置了填充和邊距頂部/底部爲0px，以便將樣式重置爲一定程度。

爲什麼會這樣，我應該採取什麼措施來防止這種情況？

UPDATE：使用Chrome 17.0.963.56，FF 11和Mac。

Answer 1

我不太確定爲什麼會出現這個問題。它沒有工作。在我自己的代碼中，我可以將它與填充關聯起來。 Chrome/Safari和Firefox正在以不同的方式處理填充。通過將som填充添加到標準css併爲Firefox做例外，我確實得到了預期的結果。這對jsfiddle示例沒有幫助（實際上可能是示例中沒有任何問題，可能是字體顯示有點不同，看起來像字母和邊框之間有不同數量的像素...）。

#adminmenu a{ 
    padding-bottom: 2px; 
} 

@-moz-document url-prefix() { 

    #adminmenu a{ padding-bottom: 0px; } 

}