图片距下面有3px的问题

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2013-10-18 13:48:16　-　阅:　-　评:0　-　积分:0

经常会听到有人提及图片距下面有3px这个问题，今天笔者就来对此进行详细的分析。下面还是先来回顾一下问题，我们让此bug重现于江湖，见下图。

为了让读者更加清楚的发现那3px，笔者已经将外容器添加了背景，此时可以看到图片与下面就一段间距，红色的字有提示说这里高3px。说到这里，那个图片距下面3pxbug的问题已经说完了。也许你会以为我接下来就要献上解决的方法，在这里要郑重的告诉你，接下来是分析时间。

至于这个3px是如何产生的呢？也许你会毫不犹豫的抛出3个字---bug！说是bug，那是完全不付责任的表现！为什么这样说呢？记得笔者在前面一篇文章《谈谈自己对于ie6下高度导致两个div间有3px这个bug的看法》中鄙视了发现这个问题的人，今天这个3px也如同前面的问题一样。根本就不是什么bug！那么，为什么还有这么多人称之为bug呢？这个，笔者是弱智型的，智商有限，实在是琢磨不透。好了，不废话了，来说说笔者的新发现。如下图：

作为读者的你看到此图，发现没有了那3px后会说什么？会说我解决了bug？请仔细看图片中的说明，图片中有样式说明，意思是将li转化成了块对象。也就是说：li在转化成块对象后那3px问题就解决了。但这个假设是否成立呢？还是来看看在那个坑爹的让人吐血三千尺而不止的ie6下是什么样子的吧。

那么，block到底能不能解决这个3px的问题呢？说到此，你有没有想到本站最开始发表的一篇文章《ie6下display:inline-block为何会失效》，两者有相似之处哦。

那么，这个3px的问题如何解决才能在ie6下也正常呢？这里就要说到图片的对齐方式了。添加vertical-align:top；即可成功解决掉这个3px问题。建议读者在一开始重置时就重置好样式，这样通篇下来就不会再为这个3px而烦恼。源码如下：

在线演示<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片距下面有3px的问题</title>
<meta name="author" content="艺灵设计,yilingsj@gmail.com, www.yilingsj.com" />
<style type="text/css">
ul{list-style:none;}
li{background:#000;}
.block{display:block; background:#666;}
li img{width:100px;height:100px;vertical-align:top}
</style>
</head>
<body>
<ul>
<li><img src="/d/file/css3/2013-10-10/初次挑逗中.jpg" /></li>
　<li class="block"><img src="/d/file/css3/2013-10-10/初次挑逗中.jpg" /></li>
</ul>
</body>
</html>

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/div/2013-10-18/96.html
若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。

亲，扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助，您可以用支付宝打赏下艺灵哦！