FireFox 4 水平 CSS 菜单中的填充错误

Question

我在此页面有一个水平 CSS 菜单：

http://72.47.251.205/ak9

在 Chrome、Safari 和Internet Explorer 8 呈现完美。在 FireFox 4 中，每个

都稍微太窄，在最后两项之间留下了间隙。

下面是 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;
}

我尝试在 body 标记上使用 -moz-box-sizing CSS 属性，但无济于事。

感谢任何有想法的人。

更新

引起我注意的是，Windows 中的 FF 4 可以正确呈现此内容，但 IE 9 则不能。看来这是跨平台以及跨浏览器的不一致。这真的开始让我担心了。

另外，我在最后一个项目上使用了绝对定位，以确保它与 .wrapper div 保持齐平，从而使所有内容都居中。这样，浏览器渲染框宽度的不一致将永远无法通过将最后一个项目强制到第二行来“破坏”菜单，这比现在发生的情况更糟糕。

Answer 1

你确定你做对了吗，伙计？我在 IE8、FF 4.0 和 FF 4.0.1 中看起来都是一样的，它们看起来是正确的。但是在 IE9 中，您描述的问题发生是因为最后两项（媒体和博客）之间存在间隙！

IE9

FF 4.0.1

之所以存在间隙，是因为您在最后一个列表项上设置了position:absolute，并且在top:0处设置了offset属性；右：0； - 如果你删除它，间隙就会消失。