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

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

在Chrome、Safari和InternetExplorer8中，它表现得非常完美。在Firefox4中，每个

都有点太窄，在最后两项之间留有一个间隙

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

我尝试在

body

标记上使用

-moz-box-sizing

CSS属性，但没有效果

感谢所有有想法的人

使现代化 我注意到Windows中的FF4适当地呈现了这一点，但IE9没有。这似乎是一种跨平台和跨浏览器的不一致。我真的开始担心了

---

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

您确定正确吗，伙计？我在IE8、FF 4.0和FF 4.0.1中也看到了相同的结果，它们看起来很正确。然而，在IE9中，您描述的问题发生在最后两项之间，即媒体和博客

---

之所以存在间隙，是因为您在最后一个列表项上设置了位置：绝对，并且在顶部设置了偏移特性：0；右：0；-如果删除此项，则间隙将消失。

谢谢您的查看。这可能是Mac/Windows的问题。我在Mac上的FF4和WindowsXP中的IE8中看到了它。我将在WXP上的FF中查看它，看看会发生什么。至于position:absolute，我将其设置为确保最后一项与页面设计齐平，而不必担心它会因为特定浏览器可能呈现

填充而中断。如果您有CSS重置，您可以通过在CSS重置中包含li{padding:0；margin:0；}来删除浏览器给定的任何默认li填充。如果没有CSS重置，只需通过添加ul.menu>li{padding:0；margin:0；}将上述规则直接包含在样式表中。接下来，从ul.菜单中删除相对位置，并从最后一个li项中删除绝对位置。接下来，将ul.menu的宽度设为960px，与div.wrapper的宽度相同。下一步，将文本对齐：居中至ul.menu。现在，您将拥有一个跨所有浏览器的居中导航。在IE 9、FF 4.0.1、GG 11、AF 5.0.5和Operal 11上进行了测试。问题是，如果任何

的渲染稍微有点不正确，它将迫使最后一项进入下一行，从而破坏设计。“位置：绝对”（position:absolute）可防止发生这种情况，以防不一致的渲染增加或减少几个像素。在这种情况下，每个

的宽度必须由其内容决定，这是我知道的防止这种行为的唯一方法。这还意味着最后一个

可能不会与.wrapper的右侧对齐。

#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;
}