IE 中多出乙個字的 BUG

今天遇到乙個很奇怪的問題，在 ie 6 中檢視網頁，發現某個 li 的最後乙個字又在下一行出現了，但**中並沒有多出乙個字。

這是 ie 6 的乙個 bug。我最終發現去掉了其上層上層容器的 float:left; 多出來的字就消失了，原因我不清楚。另外我整理了網上的一些文章，希望對您有幫助。不過我的**要複雜的多，且無注釋，所以說 ie 中多出乙個字的 bug 應該是很複雜的。

執行下面的**，可以發現多了個字。

↓這就是多出來的那只豬

1.ie 6 的 bug

經測試，只有 ie6 中有文字溢位 bug，ie 7、ie 8、火狐正常。

2. 與浮動有關

去除中的「float:left;」，你會發現多出來的「豬」字不見了，頁面正常顯示。同樣去除中的「float:right;」，多餘的「豬」字也同樣消失，頁面正常顯示。

3. 與注釋「<---->」的位置有關

將注釋轉移到

前面，多餘的「豬」字消失，頁面正常顯示。將注釋轉移到 ↓這就是多出來的那只豬

下面，多餘的「豬」字也同樣消失，頁面正常顯示。

4. 與固定寬度有關

去除中的「width:400px」，多餘的「豬」字消失，頁面正常顯示。

5. 溢位字數與注釋條數有關

增加注釋的條數：當 1 條注釋時，則多出來 1 個字；2 條注釋時，則多出來 3 個字；3 條注釋時，則多出來 5 個字……我們會從上面的規律中得到這樣乙個公式：溢位文字的字數 = 注釋的條數 *2-1，這裡的字數在中文或英文數字時都成立。當溢位的文字字數大於文字的字數時，文字區塊將會消失。

解決方法：

a. 不放置注釋。最簡單、最快捷的解決方法

b. 注釋不要放置於 2 個浮動的區塊之間

c. 將文字區塊包含在新的

之間，如：↓這就是多出來的那只豬

d. 去除文字區塊的固定寬度，與 3 有相似之處

e. 有的人在注釋後加乙個

或者空格，但只是消除現象。

f. 不要給浮動元素設定多寬度，使其不會到達包含元素的底部，或者對最後乙個元素設定 margin-right: -3px; 或者更小。

g. 注釋可以這樣寫：