IE6躲貓貓bug【幽靈文本】

解決方案：

if($.browser.msie && parseInt($.browser.version) < 7){//ie6的躲貓貓事件
                var html = _.template(tpl, {items:obj.ItemArray}) + '<div style="clear:both;font-size:0;height:0;"></div>';
            }
            else{
                var html = _.template(tpl, {items:obj.ItemArray});
            }

 

 

原文地址：

http://hi.baidu.com/821402834/item/ed609025fa2a04dda417b622

問題重現條件：

1、一個容器包含2兩個具有“float”樣式的子容器。

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

3、在第二個容器前存在注釋

4、多出文字個數與注釋的條數有關

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

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

代碼：

<div style="width:400px;height:200px;">

    <div style="float:left;background:red;"></div>

       <!---->

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

</div>

解決方案：

1、不寫注釋（簡單直接有效方法，但降低了代碼可讀性）

2、將html注釋<!---->換成IE注釋<!--[if !IE]>這裡是注釋內容[endif]-->

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

3、在第二個容器後面加一個或者多個<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> 

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

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

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

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