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

日期：2013-11-30  来源：攀枝花惠康网络公司

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

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

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

HTML代码：

<ul>
  <li><a href=http://www.css88.com/archives/"#">第1条毗连</a></li>
  <li><a href="#">第2条毗连</a></li>
  <li><a href="#">第3条毗连</a></li>
</ul>

CSS代码：

* {padding:0;margin:0;}
li { }
li a {background:#CCC;border-bottom:1px #000 solid;text-decoration:none;display: block;}
li a:hover {background:#BBB;}

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

* {padding:0;margin:0;}
li { }
li a {background:#CCC;border-bottom:1px #000 solid;text-decoration:none;display: block;zoom:1}
li a:hover {background:#BBB;}

就是在li a 样式中插手zoom:1；

* {padding:0;margin:0;}
li { display:inline }
li a {background:#CCC;border-bottom:1px #000 solid;text-decoration:none;display: block;}
li a:hover {background:#BBB;}

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

<ul>
  <li><a href=http://www.css88.com/archives/"#">第1条毗连</a></li><li><a href="#">第2条毗连</a></li><li><a href="#">第3条毗连</a></li>
</ul>

解决体例3（不举荐）：

就是在li 样式中插手display:inline ；

解决方案2：

或者

解决方案1：

<ul>
  <li><a href=http://www.css88.com/archives/"#">第1条毗连</a></li><li>
<a href="#">第2条毗连</a></li><li>
<a href="#">第3条毗连</a></li>
</ul>

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

解决方案4：（感谢感动.Roc Happy