今天在做一个手机网页时，发现一个奇怪的问题，代码没问题，可是预览时总是发现图片下方和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;
