12月 10, 2014

图片下方出现缝隙解决方法

今天在做一个手机网页时,发现一个奇怪的问题,代码没问题,可是预览时总是发现图片下方和div边框之间有一条4px的空隙,最后还是得以解决。

最简单的办法是固定高度:

<div style="width: 900px;height: 75px;margin-top: 0px;"><img src="images/top.jpg" width="900" height="75"></div>

一个可以使用display属性解决:

<div style="float: left;"> <img src="images/picture1.jpg" style="border:4px solid #191919;display:block;" width="553" height="179" /> </div>

另一个可以用vertical-align属性解决:

<div style="float: left;"> <img id="pic1" src="images/picture1.jpg" style="border:4px solid #191919;vertical-align:top;" width="553" height="179" /> </div> 

使用margin-bottom属性解决:

<div style="width: 900px;height: 75px;margin-top: 0px;"> <img src="images/top.jpg" style="margin-bottom: -4px;"  width="900" height="75"> </div>

使用字体大小属性font-size解决:

<div style="width: 900px;height: 75px;margin-top: 0px;font-size:0"> <img src="images/top.jpg" width="900" height="75"> </div>

我几种方法都试了下,发现在手机上有时还会有一点点缝隙,最后 我使用margin-bottom:-5px;多剪去1px,这样就完美显示了

margin-bottom: -5px;