2008-07-07

css消除图片下方空隙

今天在做一个网页时，在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>

 

 

评论
发表评论

您还没有登录，请登录后发表评论

daoger
  • 浏览: 190873 次
  • 性别: Icon_minigender_1
  • 来自: 山东济南
  • 详细资料
搜索本博客
我的相册
Fe9b8bf5-5e8b-35c4-ad80-88fec768d45c-thumb
image007
共 105 张
存档
最新评论