IE6文字溢出BUG

在IE6下，经常会产生一些灵异事件，比如：HTML代码里是"猪猪猪"，但用IE6浏览时，页面上会显示"猪猪猪猪"，莫名其妙地多出了一头，IE6太邪恶了，私自产猪。

像这种情况在IE7，IE8，FF中是不存在的。

发生条件一:CSS中用了float属性,并且用了html注释<!-- 注释 -->。

代码：
<div style="width:200px;">
        <div style="float:left;"></div><!-- 在IE6的重复文字BUG -->
        <div style="float:left;width:200px;">猪猪猪</div>
        <div style="clear:both;"></div>
</div>

怎样消除这种邪气呢？

方法一：在父级容器加入 display:inline;

代码：
<div style="width:200px;display:inline;">
        <div style="float:left;"></div><!-- 在IE6的BUG -->
        <div style="float:left;width:200px;">猪猪猪/div>
        <div style="clear:both;"></div>
</div>

方法二：在子级容器中去掉所有注释


发生条件二：重复文字标签的上面有display:none属性的div (偶尔出现)

这种情况并不一定存在，和所写的整个HTML结构有关。

解决方法：
1.把受影响的div的代码提前，也就是要把出现问题的代码层放在有display:none的div 的前面！
2.在带有display:none的div外面再套一层div


总结

由注释造成文字溢出，属于IE6的BUG，溢出文字的字数=注释的条数*2-1，这里的字数在中文或英文数字时都成立。注释所在位置与溢出位置、区块的浮动以及文字区块的固定宽度有必然联系。

1、不放置注释。最简单、最快捷的解决方法；

2、注释不要放置于2个浮动的区块之间；

3、将文字区块包含在新的<div></div>之间；

4、去除文字区块的固定宽度，与3有相似之处；

5、在后面加一个<br />或者空格；(不推荐)

6、使用IE注释格式，如：<!--[if !IE]>Put your commentary in here…<![endif]-->

7、给盒子加position:relative;属性