<li>标签插入图片链接在IE6下<img>有5px的空白解决4种方法
很多情况下我们都会在列表标签<li></li>中插入图片链接，如<li><a herf=”#"><img src=”a.png” /></a></li>。这段代码在IE6中会显示有“间隙”。
测试：
用Dreamweaver新建一个新文档，在<body></body>中插入html代码：
<ul>
<li><a href="#"><img src="images/277-57.png" width="277" height="57" /></a></li>
<li><a href="#"><img src="images/277-57.png" width="277" height="57" /></a></li>
<li><a href="#"><img src="images/277-57.png" width="277" height="57" /></a></li>
<li><a href="#"><img src="images/277-57.png" width="277" height="57" /></a></li>
</ul>
然后在<head></head>标签中插入CSS样式代码：
<style type="text/css">
ul {
width: 280px;
}
ul li {
display:block;
height:57px;
width:277px;
}
</style>
测试：IE6, IE8,Firefox
接下来，我们要解决IE6下的“间隙”问题：
方法一：使li浮动，img为块级元素。
ul li {
float:left;/*浮动*/
display:block;
height:57px;
width:277px;
}
img {
display: block;
}
经过上面的样式修改，在IE6下显示的效果就会像IE8下的效果！
接下来我们要去掉“边框问题”，在IE系列中img标签都有边框问题，所以我们要定义<img> 的边框为0px。这样才能和其他浏览器显示最终的效果一样！
img {
display: block;
border-width:0;
}
到这里就基本结束了！还有其他几种方法可以消除li下图片链接间隙问题：
方法二：
ul{
width: 280px;
font-size: 0;
}
ul li{
display:block;
height:57px;
width:277px;
}
方法三：
设置 img 的 vertical-align: bottom;
ul{
width: 280px;
font-size: 0;
}
ul li{
display:block;
height:57px;
width:277px;
}
img{
vertical-align:bottom;
}
方法四：
设置 img 的 margin-bottom: -5px;
ul{
width: 280px;
font-size: 0;
}
ul li{
display:block;
height:57px;
width:277px;
}
img{
margin-bottom: -5px;
}
