Question

http://testing.ipalaces.org/在IE9中看起来不同，其中子导航中的第二个LI构成顶部边框。看起来它的宽度现在适用于每个主流浏览器，但IE9。如果我把它设置为正好3px，它在IE9中运行良好。

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

Answer 1

问题在于，如果没有明确的宽度，#sub-navigation li.selected会因为字体渲染而在IE 9中渲染几个像素，从而中断下一个浮动元素。强制宽度会修复它。

另外，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>内有所有下拉列表作为嵌套列表？

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

此外，代码将更加逻辑地阅读，并在将来更容易扩展。

Answer 4

您应根据所需的数字为子菜单的所有li设置固定宽度。现在第一个列表元素应该设置为width：107px。

要对其进行测试，只需将style="width:107px“添加到<li class="selected">

即可祝你好运：）