无序列表ul是XHTML重要的标签之一，页面中很多内容都是以无序列表ul的形式出现的，在52CSS以前的文章中，介绍过很多应用无序列表ul实现的DIVCSS网页布局中的元素。

无序列表ul在IE6、IE7中下边距出现问题的bug，或许您在进行CSS布局开发时已经遇到了这样的苦恼。

在大多数时候，无序列表内的列表项li都是固定的。比如，有六个，八个，十个。因而我们可以轻松的定义ul的宽度和高度。而在一些交互性很强的网站中，无序列表ul内的列表项li是不固定个数的。因而我们不能定义ul的高度，需要让它自适应li的个数，随着功能与内容的需要，随时动态的调整它的大小。在这样的情况下，本实例所要讲述的bug就要出现了。

看下面的图片:
 

这是一个由六个列表项li组成的无序列表，而li的数量可能有所增加或减少，因而我们不能定义ul的高度，按照正常的思路，我们定义ul的上侧与左侧的内边距，再定义li右侧与下侧的外边距，实现等边距的效果。思路如下图所示。
 

我们开始着手编码。HTML代码如下：

   
• http://52css.com/attachments/month_0810/879/1.jpg" />

   
• http://52css.com/attachments/month_0810/879/2.jpg" />

   
• http://52css.com/attachments/month_0810/879/3.jpg" />

   
• http://52css.com/attachments/month_0810/879/4.jpg" />

   
• http://52css.com/attachments/month_0810/879/5.jpg" />

*{
    padding:0;
    margin:0;
    list-style:none;
}
ul {
    width:390px;
    margin:20px auto;
    padding:10px 0 0 10px;
    border:1px solid #ccc;
    overflow:hidden;}
li {
    float:left;
    width:120px;
    height:150px;
    margin:0 10px 10px 0;
    overflow:hidden;
}

我们在IE6、IE7和FF中浏览页面效果。发现在IE7中，ul底部的间隔消失了，也就是li的下外边距定义没有起到作用。如下图如示。


 

这是一个IE7的bug，我们通过CSS HACK来修复它，应用“*+html”作为选择器，针对IE7，设置UL的下内边距。代码如下。


css.com]
*+html ul {
    padding-bottom:10px;
}


经过设置后，发现在IE6、IE7和FF中浏览均没有再出现问题。
　　
然后我们的列表项li是不固定的，我们去掉一个列表项li再浏览页面。发现在IE6下，ul底部的间隔又一次消失了，也就是li的下外边距定义没有起到作用。如下图如示。

我们不得不进行修复，针对IE6进行CSS HACK编码。应用“*html”作为选择器，针对IE6，设置UL的下内边距。代码如下。
*html ul {
    padding-bottom:10px;
}


再次运行后，发现在IE6、IE7和FF中浏览均没有再出现问题。

这也太不可思议了。怎么会频繁的出现如此多的问题。我们不得不考虑新的出路了。其实我们只要换一个角度去思考，这两个bug均可以成功的避免。


也就是，我们设置ul的左侧和下则外边距，设置li的上侧和右侧外边距来实现间隔。如下图所示。

这样设置以后，无论在IE6、IE7和FF中，运行均没有问题。