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

在IE6里多出了幾個(gè)字符？是的，很詭異吧~但是絕對(duì)是同樣的源代碼哦~！

你可以下載下面的HTML文檔，在IE6中查看一下效果。 后面的注釋是4種解決方法，可以一一刪掉注釋查看。

下載測(cè)試

出現(xiàn)這個(gè)BUG的“機(jī)遇“其實(shí)并不大，要滿足以下一個(gè)或者多個(gè)條件：

1.父元素的內(nèi)部有多個(gè)浮動(dòng)元素。

2. 最后一個(gè)浮動(dòng)元素前有隱藏元素：包括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多出來的字的數(shù)量=注釋或者dispaly:none等隱藏元素的數(shù)量*2-2
</div>
</div>

有個(gè)特別有意思的情況出現(xiàn)，當(dāng)我在最后一個(gè)顯示的div前，再加display:none;的div，下面又會(huì)增加不固定的數(shù)量的重復(fù)文字！

最終得出的結(jié)論是：溢出文字的字?jǐn)?shù)=注釋的條數(shù) *2-1

這個(gè)變態(tài)BUG的最早文獻(xiàn)是出現(xiàn)在2004年，這里可見。

我不全文翻譯了，總結(jié)一下他的方法。

1.把浮動(dòng)的子元素加上display:inline;屬性

2.去掉注釋 ，使用IE專用注釋。<!–[if !IE]>Put your commentary in here…<![endif]–>

但是，我發(fā)現(xiàn)我這里沒有運(yùn)用注釋也出現(xiàn)了這個(gè)狀況，可以看出，不僅對(duì)于注釋這類語句，只要是HTML代碼中隱藏掉的元素，都會(huì)導(dǎo)致這個(gè)BUG的出現(xiàn)。

當(dāng)然有同學(xué)會(huì)說，既然已經(jīng)display:none了，那為什么不直接把這個(gè)DIV刪掉呢？因?yàn)橐粋€(gè)程序控制display:none或者display:block的動(dòng)態(tài)DIV， 靜態(tài)頁(yè)面一般不會(huì)有這個(gè)問題。

display:inline;其實(shí)在IE6中著名的3pxBUG中也出現(xiàn)過，于是我又嘗試使用了他的另外一個(gè)解決方法，margin-right:-3px;果然也可以解決。但是因?yàn)樵贗E7里沒有影響，同學(xué)使用這個(gè)方法時(shí)候，最好是加個(gè)IE6的hack:_margin-right:-3px;

再然后既然是隱藏元素激發(fā)了BUG，那么我們可以在這個(gè)浮動(dòng)的隱藏元素外面再嵌套一個(gè)DIV。

解決方法總結(jié)：

1.把浮動(dòng)的子元素加上display:inline;屬性（推薦）

2.去掉注釋和所有隱藏元素（缺點(diǎn)：特殊情況下不一定可以刪除）

3.?把浮動(dòng)的子元素加上margin-right:-3px;屬性（缺點(diǎn)：要加IE6的hack，也算是好方法）

4.在隱藏的DIV外嵌套一個(gè)DIV（缺點(diǎn)：增加的結(jié)果復(fù)雜性）

本文是在我遇到問題后在網(wǎng)上查閱了中外各個(gè)版本的文獻(xiàn)后再加上自己想法總結(jié)得出的結(jié)論貼，方法不少，大家遇到該狀況時(shí)候，請(qǐng)針對(duì)自己的實(shí)際情況選擇方法。

有同學(xué)說IE6不需要管了，確實(shí)是，我作為個(gè)人博主我就可以不管IE6！但是企業(yè)網(wǎng)站等等，面對(duì)中國(guó)廣泛的IE6用戶，還是要有責(zé)任心的，謝謝。

轉(zhuǎn)載于:https://www.cnblogs.com/javashi/archive/2010/05/08/1730504.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。