首页 > 代码库 > IE6下列表li空白间距

IE6下列表li空白间距

2024-08-07 04:26:50   219人阅读

 怎么样才会发生在IE6下列表li空白间距的bug，如下：

1
2
3
4
5
6
<ul class="list">
  <li class="list-item"><a href="http://www.mamicode.com/#">列表空白间距bug</a></li>
  <li class="list-item"><a href="http://www.mamicode.com/#">列表空白间距bug</a></li>
  <li class="list-item"><a href="http://www.mamicode.com/#">列表空白间距bug</a></li>
  <li class="list-item"><a href="http://www.mamicode.com/#">列表空白间距bug</a></li>
</ul>

 

1
.list-item a{display:block;}

20131224233234

DEMO

只要将列表li的子元素(子元素是行内元素的情况下，比如a,span)设置成块元素就会在ie6出问题。
怎么解决，只要触发ie的hasLayout便可以解决：
设置高度（height:1%;）或宽度，display:inline-block;
也可以在将li设置成行内元素display:inline;

如何触发ie的hasLayout

  1. position:absolute/inline-block;
  2. float:left/right;
  3. width:除“auto”以外的值
  4. height:除”auto”以外的值，如”height:1%;”
  5. zoom:除“normal”以外的值
  6. writing-mode-tb-rl; 

转自http://jqc.me/?p=35
图片 
将左侧li样式设置为
li{display:inline;}  问题解决

IE6下列表li空白间距


联系
我们