在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、Opera等W3C浏览器中没有任何问题，但是在IE系列版本（不包括IE8）中，都会产生一个3px的bug，详见下图：
目前笔者所知道的解决方法有两种：
- 给
li添加float属性，属性值可以是除none外的任意值 - 给
li添加vertical-align属性，属性值可以是任意值
从解决问题的实质上，这两种方法并无区别，都是通过添加相应的css属性来激发li的haslayout，但是方法2更适合来解决这个问题，因为一旦给 li添加浮动，那么势必要清除之，这是个棘手的问题，虽然有很多方法可以来解决浮动带来的麻烦，但是无形中增加了代码的负重，那是我们不想看到的，所以推荐使用方法2。
