码迷,mamicode.com
首页 > 其他好文 > 详细

IE6下列表li空白间距

时间:2014-12-10 12:08:03      阅读:130      评论:0      收藏:0      [点我收藏+]

标签:http   io   ar   os   sp   on   div   问题   bs   

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

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

 

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

bubuko.com,布布扣

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
bubuko.com,布布扣 
将左侧li样式设置为
li{display:inline;}  问题解决

IE6下列表li空白间距

标签:http   io   ar   os   sp   on   div   问题   bs   

原文地址:http://www.cnblogs.com/hgsmama/p/4154960.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!