IE6重复字符BUG

IE6重复字符BUG

IE6重复字符BUG


好久没遇到如此有趣的BUG了，有多有趣呢？看下面的图~



在IE6里多出了几个字符？是的，很诡异吧~但是绝对是同样的源代码哦~！

你可以下载下面的HTML文档，在IE6中查看一下效果。 后面的注释是4种解决方法，可以一一删掉注释查看。

下载测试

出现这个BUG的“机遇“其实并不大，要满足以下一个或者多个条件：

1.父元素的内部有多个浮动元素。

2. 最后一个浮动元素前有隐藏元素：包括html注释和display：none的元素

3.子元素的宽度和父元素相同，父元素的宽度减去子元素宽度小于3px
<div style=“width:500px;font-size:12px;font-weight:bold;”>

<div style=“float:left;background

998675;color

fff;width:480px;height:40px;

line-height:40px;padding:0 10px;”>

A-element

</div>

<div style=“float:left;display:none;
overflow:scroll”></div>

<div style=“float:left;display:none;”></div>

<div style=“float:left;display:none;”></div>

<div style=“float:left;display:none;”></div>

<div style=“float:left;width:480px;background

fffbb2;color

998675;height:40px;

line-height:40px;padding:0 10px;”>

G-element多出来的字的数量=注释或者dispaly:none等隐藏元素的数量*2-2

</div>

</div>

有个特别有意思的情况出现，当我在最后一个显示的div前，再加display:none;的div，下面又会增加不固定的数量的重复文字！

最终得出的结论是：溢出文字的字数=注释的条数 *2-1

这个变态BUG的最早文献是出现在2004年，这里可见。

我不全文翻译了，总结一下他的方法。

1.把浮动的子元素加上display:inline;属性

2.去掉注释 ，使用IE专用注释。<!–[if !IE]>Put your commentary in here…<![endif]–>
但是，我发现我这里没有运用注释也出现了这个状况，可以看出，不仅对于注释这类语句，只要是HTML代码中隐藏掉的元素，都会导致这个BUG的出现。

当然有同学会说，既然已经display:none了，那为什么不直接把这个DIV删掉呢？因为一个程序控制display:none或者display:block的动态DIV， 静态页面一般不会有这个问题。

display:inline;其实在IE6中著名的3pxBUG中也出现过，于是我又尝试使用了他的另外一个解决方法，margin-right:-3px;果然也可以解决。但是因为在IE7里没有影响，同学使用这个方法时候，最好是加个IE6的hack:_margin-right:-3px;

再然后既然是隐藏元素激发了BUG，那么我们可以在这个浮动的隐藏元素外面再嵌套一个DIV。

解决方法总结：

1.把浮动的子元素加上display:inline;属性（推荐）

2.去掉注释和所有隐藏元素（缺点：特殊情况下不一定可以删除）

3. 把浮动的子元素加上margin-right:-3px;属性（缺点：要加IE6的hack，也算是好方法）

4.在隐藏的DIV外嵌套一个DIV（缺点：增加的结果复杂性）
本文是在我遇到问题后在网上查阅了中外各个版本的文献后再加上自己想法总结得出的结论贴，方法不少，大家遇到该状况时候，请针对自己的实际情况选择方法。

有同学说IE6不需要管了，确实是，我作为个人博主我就可以不管IE6！但是企业网站等等，面对中国广泛的IE6用户，还是要有责任心的，谢谢

转载自：http://www.cnblogs.com/muyou/archive/2011/08/10/2133842.html