我的位置: 首页  >   揭秘CSS  >   10.4.3 列表 li 的阶梯Bug

10.4.3 列表 li 的阶梯Bug

编辑:比特教程网    时间:2018-10-13 03:48    


在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 所示:

现代浏览器中运行结果

图10-6  现代浏览器中运行结果

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

IE6及更低版本中运行结果

图10-7  IE6及更低版本中运行结果

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