[推荐] IE图片下空隙问题解决方法集合 ！！！！！(常见问题解答)

snwebsite 楼主

看到问此问题的很多，所以花点时间整理下，欢迎大家提意见，做补充修改，谢谢！

问题如下:

<style> div { width:500px; border:1px solid #f00; background:#000; } </style> <div> <img src="http://www.google.com/intl/en/images/logo.gif" /> </div>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

解决方法:一、改变HTML的排列;)

<style> div { width:500px; border:1px solid #f00; background:#000; } </style> <div><img src="http://www.google.com/intl/en/images/logo.gif" /></div>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

解决方法:二 、display:block

<style> div { width:500px; border:1px solid #f00; background:#000; } img {display:block} </style> <div> <img src="http://www.google.com/intl/en/images/logo.gif" /> </div>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

解决方法:三、负值

<style> div { width:500px; border:1px solid #f00; background:#000; } img {margin-bottom:-5px} div>img {margin-bottom:0} </style> <div> <img src="http://www.google.com/intl/en/images/logo.gif" /> </div>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

解决方法:四、字体大小

<style> div { width:500px; border:1px solid #f00; background:#000; font-size:0 } </style> <div> <img src="http://www.google.com/intl/en/images/logo.gif" /> </div>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

解决方法:五、vertical-align:bottom 、 vertical-align:middle 、vertical-align:top .............  ;)

<style> div { width:500px; border:1px solid #f00; background:#000 } img {vertical-align:bottom} </style> <div> <img src="http://www.google.com/intl/en/images/logo.gif" /> </div>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

[ 本帖最后由 snwebsite 于 2006-11-1 20:21 编辑 ]

fengbuhuo

不错，学习了，原来排版也有问题。。。。。。。。。。

Sheneyan

我还是老办法，设置line-height:0

飞虫

多谢，不知道能不能给每个方法给解释一下原因，实在不明白为什么为要这样子才能解决问题？
当然，如果是IE比较BT的原因的话，就不用解释了

发现一点问题：

1.方法三 负值

这个方法在FF下面有点问题

另外问一句 -5px 这个数字是怎么得来的？是根据图片的大小来的还是不管什么大小尺寸的图片都是-5px


2.方法五 img {clear:both}
看例子，效果是达到了，但是似乎不是clear:both在起作用，而是方法一在起作用，因为我刚才去掉img {clear:both}，效果可以达到，然后发现在保留clear:both的情况下
把代码由

1. <div><img src="http://www.google.com/intl/en/images/logo.gif" /></div>

复制代码

1. <div>
   
2. <img src="http://www.google.com/intl/en/images/logo.gif" />
   
3. </div>

复制代码

问题就来了，楼主再斟酌一下看看？

snwebsite 楼主

谢谢楼上提醒，我改了方法

lyvv

貌似这些解决方法都和layout有关

http://old9.blogsome.com/2006/04/11/onhavinglayout/

snwebsite 楼主

不是什么都和layout有关。。。。。。。。—_—!!

guangu

改变排列居然也有影响
W3真的那么严格的啊
不过规范了书写规范确实好处多多

kabolee

其实在《网站重构》本书里面
都提倡在img标签加上 img{display:block}
不过当时没很注意这个问题

slxvista

学习了。。。

jdjia

我一直用img{display:block}

webjomin

display:block

xd888

学习中。。。

weihua22

学习中。。。。。