網頁制作poluoluo文章簡介:測試結果為當不適當地使用float:left/right; width:100%; display:none;CSS屬性值及相應的HTML結構做組合,會引發在IE中的七種怪異問題,此問題在中文及英文字體均會出現。
在做項目開發時遇到了一個怪異現象“整段內容被重影”的問題,一般來說這類問題在IE6中表現的比較多,但這次出人意料的是IE7也殃及在內。在早前互聯網上就有分享過使用HTML注釋會引起類似的文字倒影問題,但此時的頁面卻是沒有任何注釋~,持續地測試分析問題變得越來越有趣了…
測試結果為當不適當地使用float:left/right; width:100%; display:none;CSS屬性值及相應的HTML結構做組合,會引發在IE中的七種怪異問題,此問題在中文及英文字體均會出現。詳細如下例:
閱讀約定:
cont1是指:<p class=”cont1″>ABCDEFG</p>
cont2是指:<p class=”cont2″>1234567</p>
在IE6中,cont1與cont2字符長度相同時,文本會消失,且容易引起浏覽器IE6崩潰。
但改變浏覽器窗口尺寸時內容會再次顯示。
注意:測試了IE Collection的:6.0.2900.5512.xpsp_sp2_qfe.090206-1239IC版本出現此問題
DEMO:http://blog.gulu77.com/demo/200908/float/a1.html
在IE6中,當浏覽器寬度少於內容寬度文本會消失,且容易引起浏覽器崩潰。
但改變浏覽器窗口尺寸時內容會再次顯示。
注意:測試了IE Collection的:6.0.2900.5512.xpsp_sp2_qfe.090206-1239IC版本出現此問題
DEMO:http://blog.gulu77.com/demo/200908/float/a2.html
在IE6中,cont2比cont1多出一個字符時,內容會被重映為相等長度的文本,且容易引起浏覽器IE6崩潰。
DEMO:http://blog.gulu77.com/demo/200908/float/b1.html
在IE6中,cont2比cont1多出一個字符時,且浏覽器寬度拉伸至小於內容寬度文本會完全重影。
此問題與第三個對比在於一個不需要拉伸,一個需要拉伸。
DEMO:http://blog.gulu77.com/demo/200908/float/b2.html
在IE6中,cont2比cont1多出兩個字符或以上時文本會被倒序重影,且容易引起浏覽器IE6崩潰。
規律為:重影字符數 = cont1的字符數 + 1個字符數
DEMO:http://blog.gulu77.com/demo/200908/float/c1.html
在IE6中,浮動元素之間有不含內容的內聯元素的標簽(指內聯標簽或CSS模擬的內聯標簽)後會引起文本重影。
規律為:重影字符數 = 內聯元素數量 * 2字符數 – 1個字符數
DEMO:http://blog.gulu77.com/demo/200908/float/d1.html
與第六的《內聯元素引起的文本重影》類似,但在cont2後面添加了一個內聯元素後會導致IE7也出現重影BUG。
而內聯元素相加超出cont2字符數時,IE7表現正常,IE6則表現為消失。
規律為:重影字符數 = <span>數量 * 2字符數 – 1個字符數
DEMO:http://blog.gulu77.com/demo/200908/float/e1.html
而內聯元素相加超出cont2字符數時,IE7表現正常,IE6則表現為消失。
注意:測試了IE Collection的:6.0.2900.5512.xpsp_sp2_qfe.090206-1239IC版本出現此問題
規律為:重影字符數 = <span>數量 * 2字符數 – 1個字符數
DEMO:http://blog.gulu77.com/demo/200908/float/e2.html
感激Mr.Q 提供的解決方法,很不錯~ 給有問題的元素加上position:relative能一一對應解決問題。