關於IE6幽靈字體

　　前言：今天作項目的時候在IE6下出現了這樣的一種現像，這種狀況只在IE6下出現，最後在網友的幫助下這個問題最終獲得瞭解決。因此立刻做了下筆記！

狀況以下圖：

　我在網上找了點資料出現IE6下幽靈字體的狀況主要有以個幾個！　　　

一、一個容器包含2兩個具備「float」樣式的子容器。

二、第二個容器的寬度大於父容器的寬度，或者父容器寬度減去第二個容器寬度的值小於3（注意是小於3，當等於3時不會出現重複文字）。

三、在第二個容器前存在註釋

四、多出文字個數與註釋的條數有關

   多出文字個數=註釋條數*2-1

   當多出文字個數大於容器中的字數時，多出文字消失

個人狀況就是屬於第三種狀況，出現這種狀況解決也有好幾種：

 

一、不寫註釋（簡單直接有效的方法，但下降了代碼可讀性）

 

二、將html註釋<!---->換成IE註釋 <!--[if !IE]>這裏是註釋內容[endif]-->

 

   或 註釋不放置於 2 個浮動的區塊之間。

 

三、在第二個容器後面加一個或者多個<div style="clear"></div>來解決

 

其中clear 樣式：

 

.clear{clear:both;font-size:0;height:0;}

 

Clear:both 和 height:0 是必須得寫的font-size 能夠不寫（建議寫，由於在ie6中div會有一個默認高度,修復了舊bug但引來了新bug，還得要解決這個IE6默認高度的bug）

 

針對上面的問題能夠這樣寫

 

寫法一：<div style="clear:both; height:0;"><!----></div>

 

寫法二：<div style="clear:both;height:0;font-size:0;overflow:hidden;"></div> 

 

四、設置div的寬度，針對條件二，只要不讓第二個div的寬度大於父容器，或者不讓父容器減去第二個容器寬度小於3 ，就能夠消除這個bug，可是這樣會影響佈局

 

五、將文字區塊放在新的容器中(這種解決方法很不錯，不須要刻意去修正這個bug)

 

       <div style="float:left;width:405px;background:blue;"><div>重複文字測試</div></div>

 

    　　　　　<div style="float:left;width:405px;background:blue;"><span>重複文字測試</span></div>