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版本较低），一个项目被推下。所以，我认为由于填充，该项目（联系人）没有空间。我已尝试调整容器大小，或减少填充，并且渲染差异为~2px，在Chrome和Firefox之间...容器宽度为896px - 所有在Chrome中工作正常，在IE11中，无论如何，容器宽度应该至少903px？！是什么导致这些奇怪的差异我猜选择的谷歌字体渲染在每个浏览器中都是不同的。如何解决这个问题？

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 for ul和display：table-cell for li elements ...几乎解决了它...但是，现在我只需要删除底部的边距/填充....：）

编辑：背景图片位置有问题......所以，现在是完美的。好旧表 - 对某些事情仍然是最好的解决方案。：）

EDIT2：我会删除这个问题，但我相信这会对有类似情况的人有所帮助。结论 - ＆gt; 当您为每个菜单项设置不同宽度的菜单时，如果您想将该菜单放在固定宽度容器内，则将右/左填充设置为li元素（菜单项）显然不是最佳解决方案。显示：表格和显示：table-cell是最好的（也许只有？）可能的解决方案。

导航项填充：Firefox与Chrome和IE11

2 个答案: