【IE6的疯狂之九】li在IE中底部空行的BUG

曾经写过【IE6的疯狂之六】li在IE中底部3像素的BUG（增加浮动解决问题），原文地址：http://www.css88.com/archives/421；

IE6 BUG大全： http://www.css88.com/archives/579

但是这次li在IE中底部出现的不是3像素而是一整条空白行，如图：

HTML代码：

1

<ul>

2	<li><a href="#">第1条连接</a></li>

3	<li><a href="#">第2条连接</a></li>

4	<li><a href="#">第3条连接</a></li>

5

</ul>

CSS代码：

1	* {padding:0;margin:0;}

2

li { }

3	li a {background:#CCC;border-bottom:1px #000 solid;text-decoration:none;display: block;}

4	li a:hover {background:#BBB;}

查看demo，请使用IE6查看：http://www.css88.com/demo/IE6_bug/ie6-li/ie6-bug.html

IE6中列表的常见问题出现在当某个 li 中的内容是一个 display: block 的锚点(anchor)时。在这种情况下，列表元素之间的空格将不会被忽略而且通常会显示成额外的一行夹在每个 li 之间。一种避免这种竖直方向多余空白的解决方法是赋予这些锚点 layout。这样还有一个好处就是可以让整个锚点的矩形区域都可以响应鼠标点击。(转载请注明出处：http://www.css88.com)

解决方案1：

1	* {padding:0;margin:0;}

2

li { }

3	li a {background:#CCC;border-bottom:1px #000 solid;text-decoration:none;display: block;zoom:1}

4	li a:hover {background:#BBB;}

就是在li a 样式中加入zoom:1；

解决方案2：

1	* {padding:0;margin:0;}

2	li { display:inline }

3	li a {background:#CCC;border-bottom:1px #000 solid;text-decoration:none;display: block;}

4	li a:hover {background:#BBB;}

就是在li 样式中加入display:inline ；

解决方法3（不推荐）：

1

<ul>

2	<li><a href="#">第1条连接</a></li><li><a href="#">第2条连接</a></li><li><ahref="#">第3条连接</a></li>

3

</ul>

或者

1

<ul>

2	<li><a href="#">第1条连接</a></li><li>

3	<a href="#">第2条连接</a></li><li>

4	<a href="#">第3条连接</a></li>

5

</ul>

就是将<li>标签写成一行；

解决方案4：（感谢.Roc Happyゞ提供的结局方案）

1	* {padding:0;margin:0;}

2

li {  }

3	li a {background:#CCC;border-bottom:1px #000 solid;text-decoration:none;display: block; width:100% }

4	li a:hover {background:#BBB;}

就是在li a 样式中加入width:100%或者一个宽度值；

转载请注明转自《【IE6的疯狂之九】li在IE中底部空行的BUG》