清除li间隔

最新推荐文章于 2024-12-13 20:31:06 发布

原创最新推荐文章于 2024-12-13 20:31:06 发布 · 2.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#浏览器 #ie #class

前端——HTML 同时被 2 个专栏收录

7 篇文章

订阅专栏

前端——CSS

6 篇文章

订阅专栏

<!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.youkuaiyun.com/8/F/9/3_guoerwei.jpg" /></li>
	<li><img src="http://avatar.youkuaiyun.com/8/F/9/3_guoerwei.jpg" /></li>
	<li><img src="http://avatar.youkuaiyun.com/8/F/9/3_guoerwei.jpg" /></li>
	<li><img src="http://avatar.youkuaiyun.com/8/F/9/3_guoerwei.jpg" /></li>
	<li><img src="http://avatar.youkuaiyun.com/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;}

这个就正常了……