清除li间隔

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

guoerwei

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

阅读量2.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端——CSS 前端——HTML 文章标签：浏览器 ie class

本文链接：https://blog.youkuaiyun.com/guoerwei/article/details/6765227

前端——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;}

这个就正常了……