导航项目填充：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-在Chrome中一切正常，在IE11中，无论如何，容器宽度应为至少903px ？！ 是什么原因导致这些奇怪的差异？ 我猜每个浏览器选择的Google字体渲染都不同。 如何解决这个问题？

Answer 1

将此代码添加到您曾经使用过的任何地方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-对于IE；

Answer 2

几乎通过使用display：table用于ul和display：table-cell用于li元素来解决它...但是，现在我只需要删除底部的边距/填充即可.... :)

编辑：背景图像的位置是有问题的...所以，现在是完美的。 好的旧桌子-仍然是某些事情的最佳解决方案。 :)

EDIT2：我将删除此问题，但我相信它将对遇到类似情况的人有所帮助。 结论-> 当菜单的宽度/每个菜单项的宽度不同时，但是，如果要将菜单放置在固定宽度的容器中，则对li元素（菜单项）设置右/左填充显然不是最佳解决方案。 Display：table和display：table-cell是最好的（也许是唯一的）解决方案。