容我织梦

今天我们向大家介绍，无序列表ul在IE6、IE7中下边距出现问题的bug，或许您在进行CSS布局开发时已经遇到了这样的苦恼。
　　本文作者：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]

　　开始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]
*+html ul {
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]
*html ul {
padding-bottom:10px;
}
　　再次运行后，发现在IE6、IE7和FF中浏览均没有再出现问题。
　　这也太不可思议了。怎么会频繁的出现如此多的问题。我们不得不考虑新的出路了。其实我们只要换一个角度去思考，这两个bug均可以成功的避免。
　　本文作者：52CSS.com 如需转载请建立本站链接（http://www.52css.com/），并且不得随意改动文章内容、保留此版权声明文本！
　　也就是，我们设置ul的左侧和下则外边距，设置li的上侧和右侧外边距来实现间隔。如下图所示。
　　这样设置以后，无论在IE6、IE7和FF中，运行均没有问题。
　　有些时候，经过思考与变通，可以成功的避免很多问题，在CSS网页布局中，需要灵活的运用各种技巧与经验，往往有事半功倍的效果。有何经验与技巧欢迎您在52CSS.com留言或评论，与大家一起分享。

写在最后的自己的话：其实网上很多很多的文章都是转来转去，改来改去，经过自己测试的又有几个人？我发现这个BUG只有IE7有，IE6下貌似没有，还希望大家一起测试，发现问题，解决问题，不断进步！

图片作为网页的内容是非常普遍的现象。一个图片，在图片下面放置一段文字。以此作为对内容的索引。这种形式是非常常见的。[breakheart]

先看效果：

HTML代码：
1.首先是H3标题的代码
[code]

青蛙扑满的个人池塘 www.sonyes.com

[/code]
2.整个UL列表
[code]

• 青蛙扑满的个人池塘 ￥500
• 青蛙扑满的个人池塘 ￥500
• 青蛙扑满的个人池塘 ￥500
• 青蛙扑满的个人池塘 ￥500
• 青蛙扑满的个人池塘 ￥500
• 青蛙扑满的个人池塘 ￥500
• 青蛙扑满的个人池塘 ￥500
• 青蛙扑满的个人池塘 ￥500

[/code]

css代码：
1.设置BODY的样式
[code]body {
margin:0;
padding:0;
font-size:12px;
}[/code]
2.设置标题H3的样式
[code]
h3 {
width:416px;
height:28px;
margin:20px auto 0 auto;
border:1px solid #ccc;
border-bottom:none;
font-size:14px;
color:#669900;
text-indent:8px;
line-height:30px;
background:#f1f1f1;
overflow:hidden;
}
h3 a {
color:#669900;
text-decoration:none;
}
h3 a:hover {
color:#4a4a4a;
}[/code]
3.设置UL列表的样式
[code]
ul {
width:400px;
margin:0 auto;
padding:16px 0 0 16px;
border:1px solid #ccc;
border-top-style:dotted;
list-style:none;
}
ul li {
float:left;
margin:0 16px 16px 0;
}
ul li a {
display:block;
width:84px;
height:148px; cursor:pointer;
text-decoration:none;
text-align:center;
overflow:hidden;
}
ul li a img {
padding:1px;
width:80px;
height:80px;
border:1px solid #ccc;
}
ul li a strong {
display:block;
width:82px;
height:30px;
line-height:15px;
font-weight:100;
color:#333;
overflow:hidden;
}
ul li a span {
display:block;
width:82px;
height:20px;
line-height:20px;
color:#333;
}
ul li a span em {
font-style:normal;
font-weight:800;
color:#f60;
}
ul li a:hover img {
border-color:#333;
}
ul li a:hover strong {
color:#333;
}
ul li a:hover span em {
color:#f00;
}[/code]
>>猛击这里看效果< <