我在这个页面有一个水平的CSS菜单：
在Chrome，Safari和Internet Explorer 8中，它可以完美呈现。在FireFox 4中，每个<li>稍微过于狭窄，在最后两个项目之间留下了空隙。
以下是HTML的简单示例：
<ul id="top-nav">
<li><a href="#">Menu Item 1</a></li>
<li><a href="#">Menu Item 1</a></li>
<li><a href="#">Menu Item 1</a></li>
<li class="last-item"><a href="#">Menu Item 1</a></li>
</ul>
CSS：
#top-nav {
position: relative;
}
#top-nav li {
float: left;
height: 46px;
line-height: 46px;
width: auto;
}
#top-nav li.last-item {
position: absolute;
top: 0;
right: 0;
}
#top-nav li a {
display: block;
padding: 0 38px;
}
我尝试使用-moz-box-sizing标记上的body CSS属性，但无济于事。
感谢任何有任何想法的人。
我注意到Windows中的FF 4适当地呈现了这一点，但IE 9却没有。看起来这是跨平台以及跨浏览器的不一致。它真的开始关注我了。
另外，我在最后一项上使用绝对定位，以确保它与.wrapper div保持齐平，使所有内容保持居中。这样，渲染框宽度中的浏览器不一致将永远无法通过将最后一个项目强制到第二行来“破坏”菜单，这比现在发生的情况更糟糕。
