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>