网页设计中如何避免 IE 浏览器图片下方的空隙

IE6 是让众多设计师哭笑不得的一种浏览器,在页面排版的时候,我们会发现在 IE6 的图片下方常常会莫名其妙的多出几像素的空隙(经测试IE7也有此问题),本文就与大家分享下如何避免 IE 浏览器图片下方的空隙

先来看下图片在不同浏览器中的展示效果:

图片在不同浏览器中的显示效果对比

图片在不同浏览器中的显示效果对比

上面图片示例的源码如下:






网页设计中如何避免 IE 浏览器图片下方的空隙






要解决IE 浏览器图片下方的空隙,园子总结了三种方法。

1.最简单的也是园子推荐的一种方法,可以定义 img 标签的属性为:display:block

2.还有种方法是可以设置图片的父容器字体大小为零,即:font-size:0;

3.最后一种方法,可以定义 img 标签的 vertical-align 属性值为:vertical-align:top | bottom |middle |text-bottom; 中的任意一种即可。

经过简单的定义就可以完全避免网页设计中 IE 浏览器图片下方的空隙,我们在页面排版的时候,一定要多尝试,不同的属性可能会有意想不到的解决方案哦!

网页设计中如何避免 IE 浏览器图片下方的空隙》上有44条评论

  1. www.codigg.com

    汗啊,其实是你img元素下面有一个空白符,即(text文本),而默认text文本会有一定高度。

    其实最简单的方法是去掉你img元素后面的空格,这样还不需要这些样式,也不需要考虑这些样式兼容问题。。。。

发表评论