【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