在Chrome中填充，但在Firefox或即

Question

我有一個額外的填充在鉻中的問題。

在Firefox和IE中一切正常，但Chrome在「ul」標籤和「nav」標籤之間的底部添加了2px填充。

這裏的HTML代碼：

<nav id="mainMenu"> 
    <ul id="menuLinks"> 
     <li><a href="#">Link 1</a></li> 
     <li><a href="#">Link 2</a></li> 
     <li><a href="#">Link 3</a></li> 
    </ul> 
</nav> 

而CSS：

* { 
    margin: 0; 
    padding: 0; 
} 

body { 
    font-family: Arial, sans-serif; 
    font-size: 13px; 
    line-height: 1.3em; 
} 

nav#mainMenu { 
    height: 35px; 
    background-color: #F5F5F5; 
    margin-bottom: 10px; 
    border-bottom: 1px solid #C2C2C2; 
    border-radius: 5px 5px 0px 0px; 
} 

nav#mainMenu ul { 
    float: left; 
    padding-top: 15px; 
    list-style-type: none; 
} 

nav#mainMenu ul li { 
    padding-left: 5px; 
    display: inline; 
} 

nav#mainMenu ul li a { 
    color: black; 
    font-size: 0.9em; 
    font-weight: bold; 
    background-color: #FFFFFF; 
    padding: 5px 15px 4px 15px; 
    border-top: 1px solid #C2C2C2; 
    border-left: 1px solid #C2C2C2; 
    border-right: 1px solid #C2C2C2; 
    border-radius: 4px 4px 0px 0px; 
} 

這是怎麼好像：

鉻：

火狐：

您還可以在這裏進行測試：http://jsfiddle.net/ozpofj6o/

正如你所看到的，Firefox的正確渲染，但不鑲邊。

任何想法？

Answer 1

您的問題與在錨中使用font-size:0.9em有關。這會讓你依賴字體渲染機制來確定它究竟有多高，在Chrome中使用它當前的文本渲染引擎縮短了2個像素。如果將精確的高度（35px）放在容器上，並且仍然希望得到可預測的結果，則應指定錨點的確切高度。

您現在正指望0.9em和9個像素的填充a到'意外'加起來35像素，它可能會或可能不會。它甚至可能會在下一個版本的Firefox或其他平臺上崩潰。