實驗代碼如下:
提示:您可以先修改部分代碼再運行1、在IE、FF中測試,只在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有相似之處。
提示:您可以先修改部分代碼再運行可能以上的分析和解決方法有不到位或者不准確的地方,歡迎討論指正