核心提示：列表 li 的阶梯Bug在IE6及更低版本中，如果 li 元素中包含一些元素内容(如，链接元素)，并且让其内容进行浮动，但 li 本身不浮动时，li 就会呈阶梯状。假设在一个无序列表中，包含多个 li...
列表 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;
}
在现代浏览器中的运行结果如图 106 所示：
图10-6 现代浏览器中运行结果
在IE6以更低版本中的运行结果如图 107 所示：
图10-7 IE6及更低版本中运行结果
这个 Bug 很容易修复，只需让 li 元素也向左浮动，或将 li 元素的 display 属性设置为 inline，便可轻松解决问题。
