<!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;}
这个就正常了……
701
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
