how to fix this horizontal list on Chrome and Opera?

Question

The last li drop down on chrome and opera, it looks fine on ie and firefox. how do i fix that? what cause them to look different? Thanks here is the 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

the difference might come from different font setting from a browser to another.

use : white-space:nowrap on ul , to keep all inline-boxes on 1 line :

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