睡蓮‧池水間

在藍色論壇看到這樣一篇帖子 《IE中發現新BUG “重影”》，覺得很有意思。於是在想到底是什麼原因造成的呢？便做了以下測試：

實驗代碼如下:( 按此打開實驗板 )

1、在 IE、Firefox 中測試，只在 IE 出現文字溢出現象。

說明：註釋造成文字溢出是 IE 的 BUG 。

2、去除 <div style=”float:left”></div> 中的“float:left;”，你會發現多出來的“豬”字不見了，頁面正常顯示。同樣去除 <div style=”float:right;width:400px”> 中的“float:right;”，多餘的“豬”字也同樣消失，頁面正常顯示。

說明：註釋造成文字溢出與區塊的浮動有關。

3、將註釋轉移到 <div style=”float:left”></div> 前面，多餘的“豬”字消失，頁面正常顯示。將註釋轉移到 <div style=”float:right;width:400px”> ↓這就是多出來的那隻豬 </div> 下面，多餘的“豬”字也同樣消失，頁面正常顯示。

說明：註釋造成文字溢出與其位置有關。（可與第2點結合理解）

4、去除 <div style=”float:right;width:400px”> 中的“width:400px”，多餘的“豬”字消失，頁面正常顯示。

說明：註釋造成文字溢出與文字區塊的固定寬度有關（無論是絕對值還是相對值）。

5、增加註釋的條數：當1條註釋時，則多出來 1 個字；2 條註釋時，則多出來 3 個字；3 條註釋時，則多出來 5 個字……

我們會從上面的規律中得到這樣一個公式：溢出文字的字數=註釋的條數 *2-1，這裡的字數在中文或英文數字時都成立。

當溢出的文字字數大於文本的字數時，文字區塊將會消失。

說明：溢出的字數與註釋的條數有關。

由 1 和 2 的測試得知：注釋不要放置於 2 個浮動的區塊之間。

解決方法：

1、不放置註釋。最簡單、最快捷的解決方法，嘿嘿……

2、註釋不要放置於 2 個浮動的區塊之間。

3、將文字區塊包含在新的 <div></div> 之間，如：<div style=”float:right;width:400px”><div> ↓這就是多出來的那隻豬 </div> </div>。

4、去除文字區塊的固定寬度，與 3 有相似之處。

可能以上的分析和解決方法有不到位或者不準確的地方，歡迎討論指正。