導航項目填充：Firefox與Chrome和IE11

Question

我遇到了一個簡單的導航/菜單不同渲染的奇怪問題。這裏是代碼：

HTML：

<nav id="navigation"> 
<ul> 
<li class="active"><a href="http://bybyweb.com/hygeineco/">HOME<br><span>What we do</span></a></li> 
<li><a href="http://bybyweb.com/hygeineco/about">ABOUT<br> <span>Our expertise</span></a></li> 
<li><a href="http://bybyweb.com/hygeineco/services">SERVICES<br><span>Our products</span></a></li> 
<li><a href="http://bybyweb.com/hygeineco/why">WHY CHOOSE US<br><span>Our promise</span></a></li> 
<li><a href="http://bybyweb.com/hygeineco/news">NEWS<br><span>Updates</span></a></li> 
<li><a href="http://bybyweb.com/hygeineco/charity">OUR CHOSEN CHARITY<br><span>Great Ormond Street</span> </a></li> 
<li><a href="http://bybyweb.com/hygeineco/contact">CONTACT US<br><span>Get in touch</span> </a></li> 

</ul> 
</nav> 

相關CSS：

#navigation { 
    width:100%; 
    clear:both; 
    background-color:#a9218e; 
    height:72px; 

} 

#navigation ul { 
    width:894px; 
    height:72px; 
    list-style-type:none; 
    margin:0 auto; 
    padding:0; 
    box-sizing:border-box; 
} 

#navigation ul li { 
    display:block; 
    float:left; 
    text-align:center; 
    padding:10px 22px 0 22px; 
    margin:0; 
    height:72px; 
    box-sizing:border-box; 

} 
#navigation ul li:last-child { 
    padding:10px 20px 0 19px; 
} 

#navigation ul li a { 
    color:#fff; 
    text-decoration:none; 


    width:100%; 
    height:72px; 
    font-size:15px; 
    font-weight:400; 
} 

#navigation ul li.active { 
    background-color:#00837e; 
} 

測試環節：http://bybyweb.com/hygeineco/

嗯......在Firefox中，菜單是完美的，它適合容器的大小（894px）。但是，在Chrome和IE11（我猜IE更低版本），一個項目被推下。所以，我想這個物品（接觸）沒有空間，因爲填充物。我試圖調整容器大小，或者減少填充，並且在Chrome和Firefox之間渲染差異爲〜2px ...容器寬度爲896px - 在IE11中，所有工作都很好，無論如何，容器寬度應該在至少903px？！什麼導致這些奇怪的差異？我想所選的谷歌字體呈現在每個瀏覽器中都是不同的。如何解決這個問題？

Answer 1

幾乎解決了這個問題，通過使用顯示：表UL，並顯示：鋰元素表細胞。不過，現在我只需要在底部.... :)

除去保證金/填充

編輯：背景圖像的位置是有問題的...所以，現在是完美的。好的舊桌子 - 仍然是某些事情的最佳解決方案。 :)

編輯2：我會刪除這個問題，但我相信這將有助於有類似情況的人。結論 - >如果菜單的寬度爲/每個菜單項的寬度不同，但是如果要將該菜單放在固定寬度的容器中，則對元素（菜單項）的右/左填充設置顯然不是最佳解決方案。顯示：表格和顯示：table-cell是最好的（也許只有？）可能的解決方案。

Answer 2

添加此代碼在任何你使用box-sizing:border-box;：

box-sizing:border-box; 
-webkit-box-sizing:border-box; 
-moz-box-sizing:border-box; 
-ms-box-sizing:border-box; 
-o-box-sizing:border-box; 

-webkit-是Safari和Chrome

-moz-是Mozila（但在你的情況下，瀏覽器能理解，而不-moz-）

-o- Opera和-ms- for IE;