飞龙博客

前端文字教程

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 于广州

加入收藏夹，查看更方便。

所在分类： 网站开发

新作：

旧文：