遇到了传说的ie 6 img 3px的bug

最近在做一个网站,基本上已经算完成,就开始完善细节部分了。

IE6可能是微软最为YD 的一款浏览器了吧,至今还没有退出历史的舞台,尽管google都宣布不在支持它了。

因为该死的ie6,虽死但是牢牢地占据着老大的位置不放,没办法,boss说话了,必须兼容ie6,只好硬着头皮开始了。

IE6呢,bug很多,这就被我遇到了一个img的bug,具体请看大屏幕演示,效果1 效果2

当初很是奇怪为什么呢?在FF就OK的啊 ,换到IE就死翘翘鸟,当初,不明白这是bug,当调试了一天的时候,替换掉所有的东西,才发现img的前后空格在作怪,删掉就能OK了

所以,特此记下,以免以后会忘记。

贴上代码


<div>
                     <img src="http://www.17css.com/works/images/tree.jpg">
</div>

因为img元素在一个div里面,前后有空白的字符,FF会自动和谐掉,而ie6就晕了,所以才会出现,这个bug,在我做的网站里面img是在td里面,同样的出现3px的空隙

在图片的下方出现3px的空白的,看起来非常不和谐,这个只有在ie6才有……..

最为保险的解决方案

1、改变XHTML排版,让 img 的后面紧跟标签(若没有文字的话),如:

<div><img src=”” alt=”” /></div>

而不是:

<div>
<img src=”” alt=”” />
<div>

2、为 img 设置 display:block ;

附上,相关的链接

ie img 3px bug

另外一种3px的bug

IE6 3像素bug的缘起与解决方案