如何修复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

差异可能来自浏览器到另一个浏览器的不同font设置。

使用： white-space:nowrap on ul ，以保持所有内联框在1行：

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