修复IE下列表 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 所示：

图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 上开源。

修复IE下列表 li 底部空行Bug相关推荐

修复IE下列表 li 的阶梯Bug
在IE6及更低版本中,如果 li 元素中包含一些元素内容(如,链接元素),并且让其内容进行浮动,但 li 本身不浮动时,li 就会呈阶梯状. 假设在一个无序列表中,包含多个 li 元素,并在每个 li ...
修复IE下相对定位子元素溢出Bug
在页面上,常常使用 overflow 属性,来控制一个元素内容溢出时的处理方式.然而,在IE6和IE7中,当父元素设置了 overflow: auto 或 overflow: hidden,当子元素使 ...
10个修复ie6下bug技巧[转]
ie6的末日即将来临,对我们前端开发人员来说,无疑是一个慰藉人心的喜讯.但这个末日也并非朝日可至,所以我们还是争取最后的胜利,用各种hack和方法来规避ie6下双边距,背景透明,重复文字等等一堆bug ...
十个修复IE6下bug技巧
IE6的末日即将来临,但这个末日也并非朝日可至,所以我们还是争取最后的胜利,用各种hack和方法来规避IE6下双边距,背景透明,重复文字等等一堆bug. 10个修复IE6下bug技巧 IE6的末日即将 ...
E6终极备忘：修复IE6下_25+_Bugs
E6终极备忘:修复IE6下_25+_Bugs 引言:"珍惜生命,远离IE 6!" 对IE6最好的策略就是不去兼容它. 好吧,我知道你的难处,你不得不去兼容IE6这个狗血 ...
DirectX修复windows下.exe文件启动失败。
转载自http://blog.csdn.net/vbcom/article/details/7245186 DirectX修复工具最新版:DirectX Repair V3.5 增强版 NEW! 版 ...
SharePoint 2013 InfoPath 无法保存下列表单
在使用InfoPath发布表单,发布到SharePoint服务器报错,如下介绍: 环境:Windows 2012 DateCenter + Sql 2012 + SharePoint 2013 + O ...
MFC下列表控件的使用
MFC下列表控件的使用 2012-11-09 16:46:57| 分类: 程序VC相关 | 标签: |字号大中小订阅 1.应该加入头文件 #include <Atlbase.h> 2 ...
修复WIN10下Prolific USB-to-Serial Comm Port驱动无法使用
修复WIN10下Prolific USB-to-Serial Comm Port驱动无法使用主要是为了使用esp8266

修复IE下列表 li 底部空行Bug

修复IE下列表 li 底部空行Bug相关推荐

最新文章

热门文章