本文共 824 字，大约阅读时间需要 2 分钟。

在实际操作中，制作水平菜单时，经常会遇到一个问题：IE6无法正确处理浮动布局，导致菜单项之间出现间隙。这个问题虽然在IE6即将退出历史舞台，但作为经典问题，它值得我们深入探讨和解决。

传统的做法是使用 <ul> 和 <li> 元素，并通过 float: left 属性让这些元素水平对齐。这种方法在大多数现代浏览器中效果良好，但在IE6中可能会出现菜单项之间的间隙问题。为了解决这个问题，我们需要为IE6单独定制样式。

Step 1 为IE6单独定制样式

为了解决IE6中的问题，我们需要采取以下措施：

#nav ul li {
    width: 0;
    float: left;
    _width: 0; /* IE6兼容 */
}

这样，只有IE7及更早版本会加载专门的CSS文件。

3. 使用CSS选择器
   通过精确的CSS选择器来控制IE6的样式。例如：

   #nav ul li {
       width: 0;
       float: left;
   }
   #nav ul > li {
       width: auto;
   }

IE6会忽略选择器中的 width: auto，从而解决了问题。

Step 2 Magic

最关键的解决方法是通过 white-space: nowrap 属性，让 <li> 元素的宽度自动适应内容。例如：

#nav ul li {
    width: 0;
    float: left;
    white-space: nowrap;
}

这种方法能够在所有现代浏览器中正常工作，包括IE6。

通过以上方法，我们可以轻松解决IE6中的水平菜单显示问题，同时确保在其他浏览器中的兼容性。

转载地址：http://ftrkz.baihongyu.com/