这个CSS问题就是在我写这个博客的新皮肤的时候发现的。我简单的测试了一下IE6，IE7，IE8beta1都存在该问题。问题代码如下

<style> 
#sidebar { background:url(http://huangj.in/templates/One%20in%20Spring/img/bottomm.gif) repeat #093;  } 
    #sidebar ul { float:left; } 
.clear {clear:both;} 
</style> 
<div id="sidebar"> 
  <ul> 
    <li>ul1 第一行 长度宽一点点</li> 
    <li>ul1 第二行</li> 
    <li>ul1 第三行</li> 
  </ul> 
  <ul> 
    <li>ul2 第一行</li> 
    <li>ul2 第二行</li> 
    <li>ul2 第三行</li> 
  </ul> 
<div class="clear"></div>   
</div> 

演示地址

http://huangj.in/demo/iefloatbg.html

用宽度较大的浏览器查看这段代码的时候，显示效果正常，背景图片会正常的平铺容器，但是，你尝试缩小浏览器宽度的时候，尤其是宽度无法容下两个ul并列的时候，第二个ul会被挤到第二行，同时，背景图片也被挤到了第二个ul。

你会问到，一般我不会调整浏览器宽度啊，但是，如果你的容器的宽度不足，并且使用float属性，容器会被挤换行，这个BUG出现同样会出现。

解决方法

关于这个问题的解决方法，自己小小测试了一下，可以通过在每组相邻的两个ul之间，插入一个空白的段落<p></p>，或者插入一个&nbsp;，这样问题就解决了。但是加入空白的段落在IE6不知道为什么显示还有有问题，看来IE6只能插入一个可见字符了，比如&nbsp;。