HTML-IE6复制BUG

浏览数：19 / 时间：2015年06月09日

在IE6下使用浮动可能会出现文字重复的情况.

在IE6下，浮动层之间有注释文字的话，之前那个浮动层的内容文字就有可能遭遇一个“隐形”的复制，但是代码里查看文字可并没有多出来。

看个例子：

XML/HTML代码

<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>  
<html xmlns=“http://www.w3.org/1999/xhtml”>  
<head>  
<meta http-equiv=“Content-Type” content=“text/html; charset=gb2312″ />  
<title>多了一只猪</title>  
</head>  
<body>  
    <div style=“width:400px”>  
        <div style=“float:left”></div>    
        <!– _ –>  
        <div style=“float:right;width:400px”>↓这就是多出来的那只猪</div>  
    </div>  
</body>  
</html>

用IE6看一下，你会发现真的会多出一只“猪”！

问题原因以及解决方法：

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

解决办法：
1、不放置注释。最简单、最快捷的解决方法；
2、注释不要放置于2个浮动的区块之间；
3、将文字区块包含在新的<div></div>之间，如：<div style=”float:right; width:400px”><div>↓这就是多出来的那只猪</div></div>；
4、去除文字区块的固定宽度，与3有相似之处；
5、在后面加一个<br />或者空格；（不推荐）
6、使用IE注释格式，如：<!–[if !IE]>Put your commentary in here…<![endif]–>
7、给盒子加position:relative;属性（本人这次碰到的问题就是用的这个方法在p标签上加了position属性）

引发这种BUG有几个条件
1.是注释引起的,删除所有注释即可.
2.hidden的input直接放在form下.
3.display为none的div也有可能引发此bug.（本人这次碰到的情况！并不是注释引起的）在IE6中，一些隐藏的元素（如注释、display:none;的元素）被包含在一个浮动元素里，就有可能引发文本重复bug。解决办法：给浮动元素添加display:inline;。
2,3可以通过外面再包一次DIV解决

参考下文:转自http://blog.jobbole.com/47676/

HTML代码：
<div>
    <p>
        <span>A</span>
        <span>B</span>
        <span>C</span>
    </p>
</div>

CSS代码：
div {
    width: 100px;
}

p {
    margin-right: 1px;
}

span {
    float: left;
    width: 120px;
}

设置如下：演示中有一个div元素，有明确的width设置，在这个div中，有一个元素P——此元素有margin-right属性且该值不为0（在IE6中margin不是必需的），且在该P元素内部有三个浮动的子元素，且这三个子元素的width值比外层元素div的width大。我们来看一下在受影响的浏览器中出现了什么情况：最后一个字符“C”——被复制并重新显示在下一行。我已经强调过这里是有三个浮动元素，目前情况就是：如果有少于三个的浮动元素，此bug不会发生，而如果浮动元素数目多于三个，连续浮动元素bug就出现了。

解决方案

下面是针对此bug的解决方案

解决日期

2009 8.18 11:32:52 星期二

修复版本

所有受影响的IE

描述

注意：此方案也适用于针对浮动元素bug的CS解决方案

我们要用IE的bug修复利器去修正该bug。不！我不是在说“layout”,虽然可以通过设置P元素的layout以便IE7下修正该bug(IE6不适用)。来看看现在的页面：

修正后的页面：在单独的页面打开

HTML代码：
<div>
    <p>
        <span>A</span>
        <span>B</span>
        <span>C</span>
    </p>
</div>

CSS代码：
div {
    width: 100px;
}

p {
    margin-right: 1px;
}

span {
    float: left;
    width: 120px;
    position: relative; /*主要是这行！！*/
}

唯一的区别是：我们在浮动元素span上加了position:relative这个属性，字符C就不会再IE6和IE7中出现”复制”的现象了。