今天在做一个网页时,在IE7下发现一个奇怪的问题,先看代码:
<div style="float: left;">
<img id="pic1" src="images/picture1.jpg" style="border:4px solid #191919;"
width="553" height="179" />
</div>
感觉代码没问题,可是预览时总是发现图片下方和div边框之间有一条大概4px的空隙,最后还是得以解决。
最简单的办法是,标签写在一行中:
<div style="width: 900px;height: 75px;margin-top: 0px;"><img src="images/top.jpg" id="top" width="900" height="75"></div>
其他办法主要还是靠css属性解决! 不过,有些属性调整后在firefox下可能会有问题。一个可以使用display属性解决:
<div style="float: left;">
<img id="pic1" 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;" id="top" width="900" height="75">
</div>
使用字体大小属性font-size解决:
<div style="width: 900px;height: 75px;margin-top: 0px;font-size:0">
<img src="images/top.jpg" id="top" width="900" height="75">
</div>