IE9宽度问题

Question

http://testing.ipalaces.org/在IE9中看起来不同，子导航中的第二个LI是顶部边框。它现在的宽度似乎适用于除IE9以外的所有主流浏览器。如果我将其设置为恰好小于3px，那么它在IE9中工作得很好。

这是一个已知的bug吗？我可以在不做条件IE9 CSS调用的情况下解决这个问题吗？

Answer 1

问题是，如果没有明确的宽度，#sub-navigation li.selected会因为字体渲染而在IE9中渲染更宽的像素，从而中断下一个浮动元素。强制设置宽度可以解决这个问题。

此外，Verdana以粗体呈现相对较宽，因此您应该考虑将其从字体堆栈中删除。

#sub-navigation li { font:700 16px/1 geneva, sans-serif; }
#sub-navigation li.selected { width:105px; }

Answer 2

文本溢出怎么样？

+css：

#sub-navigation li span {
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}

试试这个，不管怎样，我没有IE (Mac rulz)，但在我的工作场所，我们通常也会为IE优化网站。如果这个不起作用，我明天会去检查一下。

Answer 3

我可以问一下，为什么在导航的最后一个<li>中，所有的下拉列表都以嵌套列表的形式出现？

如果是我，我会让每个下拉列表都包含在它自己的列表中，作为父链接的子项。这样，您可以继承父项的下拉项的水平边界，并且应该更直接地匹配宽度。

此外，代码将更具逻辑性，并且在将来更容易扩展。