飞龙博客

深入经藏 智慧如海

IE浏览器li下子元素浮动导致li出现间距BUG解决方法

feilong.org 修订于2013-05-02 08:49:33 1,123

当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

更新网址:http://feilong.org/ie-li-subfloat-height-bug
最初发布:20130502 01:59:26 feilong.org 于广州

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

所在分类: 网站开发

新作:

旧文:

飞龙前端QQ群