<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body style="background:#090;">
<style type="text/css">
body{ font-size:12px;}
.test{ list-style:none; margin:0;}
.test li{ background:#000; padding:0;}
</style>
<ul class="test">
<li><img src="http://avatar.csdn.net/8/F/9/3_guoerwei.jpg" /></li>
<li><img src="http://avatar.csdn.net/8/F/9/3_guoerwei.jpg" /></li>
<li><img src="http://avatar.csdn.net/8/F/9/3_guoerwei.jpg" /></li>
<li><img src="http://avatar.csdn.net/8/F/9/3_guoerwei.jpg" /></li>
<li><img src="http://avatar.csdn.net/8/F/9/3_guoerwei.jpg" /></li>
</ul>
</body>
</html>
如图:li之间存在几个像素的间隔。
解决方案1:大部分人应该都是这么来解决的吧。
图片的尺寸是48*48,于是给li强制定义高度
.test li{ background:#000; padding:0; height:48px;}
结果就是除IE6闹别扭外,其它浏览器都正常地把间隙消除了。
然后就是考虑给IE6单独设置样式
.test li{ background:#000; padding:0; height:48px; _margin-bottom:-3px;}
看起来似乎会是正常了,但实际上,传说中的-3px是有问题的,这边会根据页面的字体大小而变化。
例如
body{ font-size:18px;}
字体大一点的话,-3px就不够用了。
解决方案2:
尺寸是48*48,给li强制定义高度后,隐去多余空白
.test li{ background:#000; padding:0; height:48px; overflow:hidden;}
这个看起来是比上面的正常多了,但其实还可以用下面的方法来解决。
解决方案3:
给li里的图片,设置一下对齐方式
.test li{ background:#000; padding:0;}
.test li img{ vertical-align:middle;}
这个就正常了……