html - 导航项填充 : Firefox vs. 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 中，无论如何，容器宽度应为至少 903 像素？!是什么导致了这些奇怪的差异？我想在每个浏览器中选择的谷歌字体渲染都是不同的。如何解决这个问题？

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 ;