IE浏览器li下子元素浮动导致li出现间距BUG解决方法
feilong.org 修订于2013-05-02 01:59:26 您好,第 393 位朋友!当li下子元素浮动,li元素设置了高度,也清除了浮动,但是IE6和ie7下,这个li与li之间会出现2px的下间距。本日志解决方法更新网址:http://feilong.org/ie-li-subfloat-height-bug 加入收藏夹,查看更方便。
<style> html,body,div,h3,strong,em,span,small,i{padding:0;margin:0;} ul,ol,li{ padding:0; margin:0; list-style:none;} /*micro clearfix */ .cf:before,.cf:after{display:table;content:' ';} .cf:after{clear:both;} .cf{*zoom:1;} /* ie li bug */ .txtlist{} .txtlist li:before,.txtlist li:after{display:table;content:' ';} .txtlist li:after{clear:both;} .txtlist li{*zoom:1;} .txtlist li{height:20px;line-height:20px;background-color:#f00;} .txtlist li span{float:left;} .txtlist li small{float:right;} </style> <ul class="txtlist"> <li><span>飞龙博客文章标题</span> <small>2014-05-02</small></li> <li><span>飞龙博客文章标题</span> <small>2014-05-02</small></li> <li><span>飞龙博客文章标题</span> <small>2014-05-02</small></li> </ul> |
火狐和ie9下li的高度都是20px,正常,但是在ie6/ie7/ie8下,飞龙发现li之间多了个类似下边距效果的2px间距。
解决方法有2种,为li设置专为ie修补的css声明
vertical-align:bottom;/*ie6 ie7 or float:left;clear:both;*/ |
当然还有其他方法,比如 用 ie 条件注释法,在 ie.css 或ie6.css之类文件里,把li高度和行高设为18px
更新网址:https://feilong.org/ie-li-subfloat-height-bug
最初发布:20130502 01:59:26 feilong.org 于广州
加入收藏夹,查看更方便。
所在分类: 网站开发