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

Question

我在这个页面上有一个水平的 CSS 菜单:

http://72.47.251.205/ak9

在 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 保持齐平，从而使所有内容都居中。这样，浏览器在渲染框宽度方面的不一致将永远无法通过将最后一项强制到第二行来“破坏”菜单，这比现在发生的事情要糟糕得多。

Answer 1

你确定你没看错吗？我在 IE8、FF 4.0 和 FF 4.0.1 中看起来都一样，它们看起来是正确的。但是在 IE9 中，您描述的问题发生在最后两项 Media 和 Blog 之间存在间隙!

IE9

FF 4.0.1

之所以存在差距，是因为您在最后一个列表项上设置了 position: absolute，偏移属性设置在 top: 0;右:0； - 如果删除它，间隙就会消失。