终于遇到了传说的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的缘起与解决方案

文章源地址：http://www.cnblogs.com/Artur/archive/2010/04/03/1703598.html#undefined