睡蓮‧池水間 :: 文章 http://waterlily-lsl.com/modules/article/view.article.php/165/c2 Thu, 24 May 2012 01:21:50 +0200 ARTICLE @ XOOPS powered by FeedCreator http://waterlily-lsl.com/modules/article/images/logo.png 睡蓮‧池水間 :: 文章 http://waterlily-lsl.com/modules/article/ 92 52 文章XML zh-TW waterlily at waterlily-lsl dot com waterlily at waterlily-lsl dot com 文章 註釋在IE中造成文字溢出的研究 http://waterlily-lsl.com/modules/article/view.article.php/165/c2 來源: (http://www.planabc.net/2006/10/06/comment_ie_bug/)在藍色論壇看到這樣一篇帖子 《IE中發現新BUG “重影”》，覺得很有意思。於是在想到底是什麼原因造成的呢？便做了以下測試：

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml ... nal.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>多了一隻豬</title>
</head>
<body>
<div style="width:400px">
<div style="float:left"></div>
<!-- -->
<div style="float:right;width:400px">↓這就是多出來的那隻豬</div>
</div>
</body>
</html>

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 有相似之處。

可能以上的分析和解決方法有不到位或者不準確的地方，歡迎討論指正。
]]> 睡蓮 Sat, 21 Mar 2009 20:41:13 +0200