好久沒遇到如此有趣的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用戶，還是要有責任心的，謝謝。

轉載于:https://www.cnblogs.com/javashi/archive/2010/05/08/1730504.html

總結

以上是生活随笔為你收集整理的IE6重复字符BUG的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。