揭秘CSS(第 1 版)
10.4.3 列表 li 的阶梯Bug
阅读(

概述

CSS选择器

字体和文本

盒模型

元素的定位

链接和导航

表格和表单

变换、过渡和动画

布局

解决跨浏览器问题

渐进增强与优雅降级

兼容浏览器的方法

IE的hasLayout

修复IE的常见BUG

文本3像素偏移Bug

浮动元素双倍边距Bug

列表 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 所示:

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

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

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

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

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验