天行健、君子以自强不息;地势坤、君子以厚德载物!

关于我

zhenn 前端工程师,淘宝 北京!这里仅仅记录我的技术生活以及成长历程,如果有兴趣和我交流,猛击以下链接即可。
follow zhenn in TC Microblog
follow zhenn in SinaTwitter

在li里插入浮动元素产生的3px的bug

先贴代码:

1 <ul id="newsList">
2   <li><span class="txt"><a href="#">新闻标题</a></span><span class="date">[2009-10-29]</span></li>
3   <li><span class="txt"><a href="#">新闻标题</a></span><span class="date">[2009-10-29]</span></li>
4   <li><span class="txt"><a href="#">新闻标题</a></span><span class="date">[2009-10-29]</span></li>
5   <li><span class="txt"><a href="#">新闻标题</a></span><span class="date">[2009-10-29]</span></li>
6 </ul>
7 <style type="text/css">
8 *{ margin:0; padding:0;}
9 #newsList{ width:400px; border:1px solid #333; font-size:14px; margin:20px auto;}
10 #newsList li{ background:gray; line-height:25px; overflow:hidden; color:#fff; width:100%; list-style:none;}
11 #newsList li .txt{ float:left; width:300px;}
12 #newsList li .txt a{ color:#fff;}
13 #newsList li .date{ float:right;}
14 </style>

firefox、Chrome、Safari、OperaW3C浏览器中没有任何问题,但是在IE系列版本(不包括IE8)中,都会产生一个3pxbug,详见下图:

目前笔者所知道的解决方法有两种:

  1. li添加float属性,属性值可以是除none外的任意值
  2. li添加vertical-align属性,属性值可以是任意值

从解决问题的实质上,这两种方法并无区别,都是通过添加相应的css属性来激发li的haslayout,但是方法2更适合来解决这个问题,因为一旦给 li添加浮动,那么势必要清除之,这是个棘手的问题,虽然有很多方法可以来解决浮动带来的麻烦,但是无形中增加了代码的负重,那是我们不想看到的,所以推荐使用方法2。

posted on 2011-02-19 22:55  zhenn  阅读(494)  评论(0编辑  收藏  举报

导航