html - 如何在 Chrome 和 Opera 上修复这个水平列表？

Question

最后 li 在 chrome 和 opera 上下拉，在 ie 和 firefox 上看起来不错。我该如何解决？是什么导致它们看起来不同？谢谢这是 http://jsfiddle.net

CSS:

<style>
*{
    padding:0;
    margin:0;
}
.wrapper{
    width:1000px;
}
    ul{
    background: #005984;
}

ul li{
    display:inline-block;
    *display:inline;
    *zoom:1;
    margin-right:37px;
}

ul li.last-child{
    margin-right:0;
}
ul li a{
    display: inline-block;
    *display:inline;
    *zoom:1;
    padding:15px 20px;
    color:white;
}
</style>

HTML:

<div class="wrapper">
    <ul>
        <li><a href="/">HOME</a></li>
        <li><a href="/products">PRODUCTS</a></li>
        <li><a href="/news">NEWS</a></li>
        <li><a href="/sales">SALES</a></li>
        <li><a href="/support">SUPPORT</a></li>
        <li><a href="/about-us">ABOUT US</a></li>
        <li class="last-child"><a href="/contact-us">CONTACT US</a></li>
    </ul>
</div>

Answer 1

差异可能来自不同浏览器的字体设置。

使用:在 ul 上使用 white-space:nowrap ，将所有内联框保持在 1 行上:

http://jsfiddle.net/6yREk/1/