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

时间：2011-02-19 来源：zhenn

 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、Opera等W3C浏览器中没有任何问题，但是在IE系列版本（不包括IE8）中，都会产生一个3px的bug，详见下图：

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

给li添加float属性，属性值可以是除none外的任意值
给li添加vertical-align属性，属性值可以是任意值

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