li下用了浮动IE6的问题

li下用了浮动IE6的问题

直接看HTML

<ul>
         <li><a href="#" target="_blank">沃尔沃认为认为</a></li>
         <li><a href="#" target="_blank">沃尔沃认为认为</a></li>
         <li><a href="#" target="_blank">沃尔沃认为认为</a></li>
          <li><a href="#" target="_blank">沃尔沃认为认为</a></li>
</ul>

html代码很简单

CSS

ul{ clear:both; overflow:hidden; padding:10px 10px 0;}
ul li{ float:left; width:210px;  line-height:24px; height:24px; background:red url(../images/greenicon.gif) no-repeat 0px 8px; padding-left:12px; }

要实现的效果很简单

以上是IE7-10 chrome FF的效果

但是看看IE6

每个li下出现了很大的空隙，这是什么原因呢，其实很简单 分析下CSS即可这只是一个很平常的li而已上下排列，根本不需要float:left

解决办法：去掉float:left

 

总结：这个问题其实很多情况下不会出现，这也是要求我们代码书写规范。