当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
↧