在做專案開發時遇到了乙個怪異現象「整段內容被重影」的問題，一般來說這類問題在ie6中表現的比較多，但這次出人意料的是ie7也殃及在內。 在早前網際網路上就有分享過使用html注釋會引起類似的文字倒影問題，但此時的頁面卻是沒有任何注釋～，持續地測試分析問題變得越來越有趣了…
測試結果為當不適當地使用float:left/right; width:100%; display:none;css屬性值及相應的html結構做組合，會引發在ie中的七種怪異問題，此問題在中文及英文本型均會出現。詳細如下例：
cont1是指：abcdefg
cont2是指：1234567
在ie6中，cont1與cont2字元長度相同時，文字會消失，且容易引起瀏覽器ie6崩潰。
但改變瀏覽器視窗尺寸時內容會再次顯示。
注意：測試了ie collection的：6.0.2900.5512.xpsp_sp2_qfe.090206-1239ic版本出現此問題
demo：
在ie6中，當瀏覽器寬度少於內容寬度文字會消失，且容易引起瀏覽器崩潰。
但改變瀏覽器視窗尺寸時內容會再次顯示。
注意：測試了ie collection的：6.0.2900.5512.xpsp_sp2_qfe.090206-1239ic版本出現此問題
demo：
在ie6中，cont2比cont1多出乙個字元時，內容會被重映為相等長度的文字，且容易引起瀏覽器ie6崩潰。
demo：
在ie6中，cont2比cont1多出乙個字元時,且瀏覽器寬度拉伸至小於內容寬度文字會完全重影。
此問題與第三個對比在於乙個不需要拉伸，乙個需要拉伸。
demo：
在ie6中，cont2比cont1多出兩個字元或以上時文字會被倒序重影，且容易引起瀏覽器ie6崩潰。
規律為:重影字元數 = cont1的字元數 + 1個字元數
demo：
在ie6中，浮動元素之間有不含內容的內聯元素的標籤（指內聯標籤或css模擬的內聯標籤）後會引起文字重影。
規律為:重影字元數 = 內聯元素數量 * 2字元數 – 1個字元數
demo：
與第六的《內聯元素引起的文字重影》類似，但在cont2後面新增了乙個內聯元素後會導致ie7也出現重影bug。
而內聯元素相加超出cont2字元數時，ie7表現正常，ie6則表現為消失。
規律為:重影字元數 = 數量 * 2字元數 – 1個字元數
demo：
而內聯元素相加超出cont2字元數時，ie7表現正常，ie6則表現為消失。
注意：測試了ie collection的：6.0.2900.5512.xpsp_sp2_qfe.090206-1239ic版本出現此問題
規律為:重影字元數 = 數量 * 2字元數 – 1個字元數
demo：
感激mr.q 提供的解決方法，很不錯～ 給有問題的元素加上position:relative能一一對應解決問題。
浮動引起的問題
父元素的高度坍塌，即變為0 如果父元素裡所有的元素都浮動，浮動之後從父元素裡面 跑 了出去，相當於父元素裡面沒有了元素，高度沒有元素 撐起來 所以就會造成父元素的高度變為0的情況。影響內聯元素的位置 假設父元素裡有浮動元素和內聯元素，假設浮動元素在內聯元素的右邊且元素往左浮動，內聯元素會被 擠 到浮...
IE6下注釋引起的文字溢位和浮動錯位
在 改版過程中,div和css 都麼沒有問題,在ie7,ie8,firefox下都能正常的執行,但是在ie6下,出現文字溢位的bug,通過對比正常的網頁與出錯 的 發現是因為注釋 的問題.通過查詢,得知,html的注釋 的確能引起布局混亂,簡單的方法就是,刪除所有的注釋 布局就顯示正常.在網頁設計以...
浮動元素引起的問題以及清除浮動的幾種方式
浮動引起的問題 1.父元素的高度無法被撐開，影響與父元素同級的元素 2.與元素同級的非浮動元素會緊隨其後 類似遮蓋現象 3.如果乙個元素浮動，則該元素之前的元素也需要浮動 否則，會影響頁面顯示的結構 即通常所說的序列現象 解決方法如下 1.為父元素設定固定高度 2.為父元素設定overflow hi...