ZT：无序列表ul在IE6、IE7中下边距bug的CSS实例教程
无序列表ul是XHTML重要的标签之一，页面中很多内容都是以无序列表ul的形式出现的，在52CSS以前的文章中，介绍过很多应用无序列表ul实现的DIVCSS网页布局中的元素。
ul是unordered lists的缩写，表示没有序列的列表元素，ul标签是成对出现的，以<ul>开始，以</ul>结束。我们可以看看52CSS.com中一些以UL标签来编码的CSS实例。
很实用的图文混排CSS列表 - 富有语义
http://www.52css.com/article.asp?id=669
新颖别致的网站栏目列表元素
http://www.52css.com/article.asp?id=759
上下结构的图文混排CSS列表
http://www.52css.com/article.asp?id=838
52CSS衣柜 一款图片为主的ul列表
http://www.52css.com/article.asp?id=845
我爱CSS画廊 - CSS图片列表基础教程
http://www.52css.com/article.asp?id=877
http://www.52css.com/article.asp?id=879
本文作者：52CSS.com 如需转载请建立本站链接（http://www.52css.com/），并且不得随意改动文章内容、保留此版权声明文本！
在大多数时候，无序列表内的列表项li都是固定的。比如，有六个，八个，十个。因而我们可以轻松的定义ul的宽度和高度。而在一些交互性很强的网站中，无序列表ul内的列表项li是不固定个数的。因而我们不能定义ul的高度，需要让它自适应li的个数，随着功能与内容的需要，随时动态的调整它的大小。在这样的情况下，本实例所要讲述的bug就要出现了。
看下面的图片
这是一个由六个列表项li组成的无序列表，而li的数量可能有所增加或减少，因而我们不能定义ul的高度，按照正常的思路，我们定义ul的上侧与左侧的内边距，再定义li右侧与下侧的外边距，实现等边距的效果。思路如下图所示。
我们开始着手编码。HTML代码如下：
Example Source Code [www.52css.com]<li><img src="http://52css.com/attachments/month_0810/879/1.jpg" /></li>
<li><img src="http://52css.com/attachments/month_0810/879/2.jpg" /></li>
<li><img src="http://52css.com/attachments/month_0810/879/3.jpg" /></li>
<li><img src="http://52css.com/attachments/month_0810/879/4.jpg" /></li>
<li><img src="http://52css.com/attachments/month_0810/879/5.jpg" /></li>
</ul>
开始CSS编码
Example Source Code [www.52css.com]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的下内边距。代码如下。
Example Source Code [www.52css.com]padding-bottom:10px;
}
△△△ >>> 点击这里查看运行效果 <<<
经过设置后，发现在IE6、IE7和FF中浏览均没有再出现问题。
本文作者：52CSS.com 如需转载请建立本站链接（http://www.52css.com/），并且不得随意改动文章内容、保留此版权声明文本！
然后我们的列表项li是不固定的，我们去掉一个列表项li再浏览页面。发现在IE6下，ul底部的间隔又一次消失了，也就是li的下外边距定义没有起到作用。如下图如示。
△△△ >>> 点击这里查看运行效果 <<<
我们不得不进行修复，针对IE6进行CSS HACK编码。应用“*html”作为选择器，针对IE6，设置UL的下内边距。代码如下。
Example Source Code [www.52css.com]padding-bottom:10px;
}
△△△ >>> 点击这里查看运行效果 <<<
再次运行后，发现在IE6、IE7和FF中浏览均没有再出现问题。
这也太不可思议了。怎么会频繁的出现如此多的问题。我们不得不考虑新的出路了。其实我们只要换一个角度去思考，这两个bug均可以成功的避免。
本文作者：52CSS.com 如需转载请建立本站链接（http://www.52css.com/），并且不得随意改动文章内容、保留此版权声明文本！
也就是，我们设置ul的左侧和下则外边距，设置li的上侧和右侧外边距来实现间隔。如下图所示。
这样设置以后，无论在IE6、IE7和FF中，运行均没有问题。
△△△ >>> 点击这里查看运行效果 <<<
将列表项改为5项或7项同样没有问题。
△△△ >>> 点击这里查看运行效果 <<<
△△△ >>> 点击这里查看运行效果 <<<
有些时候，经过思考与变通，可以成功的避免很多问题，在CSS网页布局中，需要灵活的运用各种技巧与经验，往往有事半功倍的效果。有何经验与技巧欢迎您在52CSS.com留言或评论，与大家一起分享。
