IE浏览器li下子元素浮动导致li出现间距BUG解决方法
飞龙更新于 2013-05-02 01:59 加入书签 CTRL+D 有 15 个朋友来过当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
维护小站，感谢赞赏。
联系飞龙，请转淘宝。
飞龙初发：
2013-05-02 01:59
本文更新网址：
https://feilong.org/ie-li-subfloat-height-bug
所在目录： 网站开发