揭秘CSS(第 1 版)
10.4.4 列表 li 底部空行Bug
阅读(

概述

CSS选择器

字体和文本

盒模型

元素的定位

链接和导航

表格和表单

变换、过渡和动画

布局

解决跨浏览器问题

渐进增强与优雅降级

兼容浏览器的方法

IE的hasLayout

修复IE的常见BUG

列表 li 的阶梯Bug

文本3像素偏移Bug

浮动元素双倍边距Bug

列表 li 底部空行Bug

在IE6及更低版本中,如果在 li 元素中包含 display: block 的元素时,li 元素之间的空格将会转换为一个空行,夹在每个 li 的中间。

假设使用上一节的HTML结构来制作垂直导航,为了增大链接的点击区域,常常将 a 元素的 display 属性设置为 block,让它成为块级元素。为了方便查看效果,为链接设置背景颜色:

li a {
    display: block;
    background: #fa7a20;
}

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

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

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

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

导致这个问题的根本原因,是 li 元素后面的空格或换行符被转换为空行。如果在HTML代码中,将所有的 li 在一行内连续书写,中间没有空格,这个问题就不会出现。

然而,当存在很多 li 子元素时,在一行内书写会给阅读代码带来困难。事实上,除了在一行内显示外,这个问题还有很多解决方法。

方法一:为 li 元素设置 display: inline,让它在行内显示。由于内部的 a 元素是块级元素,这种方法不会产生任何负面影响。因此,这应该是最简单的解决方法。

li a {
    display: inline;
}

方法二:为 a 元素显式定义一个宽度或高度,使它触发IE的hasLayout。

li a {
    …
    width: 200px;      
}

如果使用高度来触发IE的hasLayout,可以同时定义 line-height 属性,并设置为height 属性相同的值,还可以让链接垂直居中,一举两得。

方法三:为每个 li 元素设置一个下边框。

ul li {
    border-bottom: 1px solid #fff;
}

在解决问题的同时,这个边框还起到分隔 li 元素的作用,此方法可谓一举两得。但是,如果你偏偏不允许分隔 li 元素,这又带来新的问题,就是当边框颜色和背景颜色不一致时,将会影响显示效果。所以,最好将边框的颜色,设置成背景颜色。

当然,也可以为 li 元素设置一个与边框等宽的负值下外边距,这样,就不必为边框颜色而纠结了。

ul li {
    margin-bottom: -1px;
    border-bottom: 1px solid #fff;
}

方法四:让 a 元素进行浮动,同时清除浮动。

li a {
    …
    float: left;
    clear: left;
}

由于浮动会导致 a 元素的宽度收缩,又会增加额外的 clear 属性,并不推荐使用这种方法。但总归它是一种解决方法,应该会有合适的应用场景。

关于作者

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

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

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

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验