10.4.3 列表 li 的阶梯Bug

在IE6及更低版本中，如果 li 元素中包含一些元素内容（如，链接元素），并且让其内容进行浮动，但 li 本身不浮动时，li 就会呈阶梯状。

假设在一个无序列表中，包含多个 li 元素，并在每个 li 中包含一个链接元素：

<ul> 
     <li><a href="#">公司介绍</a></li>
     <li><a href="#">产品中心</a></li>
     <li><a href="#">新闻动态</a></li> 
     <li><a href="#">联系我们</a></li> 
</ul>

如果让 a 元素向左浮动，而 li 本身不浮动，li 就会呈阶梯状。为了方便查看效果，清除无序列表的默认样式，并为链接设置了宽度、高度，及背景颜色：

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
ul li a {
    float: left;
    width: 130px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #fa7a20;
}

在现代浏览器中的运行结果如图 10‑6 所示：

在IE6以更低版本中的运行结果如图 10‑7 所示：

这个 Bug 很容易修复，只需让 li 元素也向左浮动，或将 li 元素的 display 属性设置为 inline，便可轻松解决问题。