文字注释，display:none，type=hidden，所能引起的文字叠影（Duplicate characters）BUG所有可能性解决方案汇总

刚经历了一个噩梦般的BUG。在无法测试的情况下，靠猜测可能性最终解决了问题，呃呃。 IE6在一些情况下会引发文字叠影BUG，也就是网上常说的多了一只“猪”。下午看到这种情况时我很嗨皮，因为最容易想到就是注释引起的，只要把注释删了就可以。但是打开源文件发现不是这么回事，没有注释，但依然还是发生了文字叠影. 大致发生问题的代码是这样的：

<div id="a" style="display:none;">
<div class="b"><strong>这里是会发生文字叠影的地方。</strong></div>
<div class="div_form_bottom"></div>
</div>

a层是个隐藏起来的层，用户进行某个操作以后，这个层会显示出来，里面嵌套了负责反馈操作结果（b层）和一个返回按钮（c层）。

耐心找了几十篇关于如何解决这问题的文章，发现引发这种BUG有几个条件：

1.最常见的是注释引起的,一个父容器包含两个浮动的子容器，中间夹一段注释最喜欢发生这种问题。

2.hidden的input直接放在form下.

 3.display为none的div也有可能引发此bug.

综合前面提到的引发这种BUG有几个条件，只有第三条比较符合。但情况又不完全相同。最后我用的是“给文字区块加position:relative;属性”来解决问题，比较遗憾的是无法深入测试。这种情况作为特例记录。

下面是比较正常条件下的基本测试和解决方案汇总。 测试代码包含了上面说到的三种情况：

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

   <!-- 注释注释 -->
   <input type="hidden" value="hidden" />
<div style="display:none;">hidden</div>
<div style="width: 400px; float: left;">IE6文字溢出的BUG</div>
</div>

解决办法（没有直接在IE6下测试，用的是IETester）：

A 直接删除注释。

B 改变结构，不出现【一个容器包含2两个具有“float”样式的子容器】的结构。

C 修正注释的写法，写成IE条件注释。

D 在出现问题的子容器后面加个丑陋的br

E 在出现问题的文字最后加一个空格。很无耻，原理是让它复制出一个空格，我是如此理解的。但是奏效了。还有一个办法就是文字后面跟个display:none的span，也奏效了。

F 在第二个容器后面加一个或者多个清除浮动的div来解决。这个方法我试了没有作用。

G 给文字区块外面包上一个div

H 去除文字区块的固定宽度

I 给文字区块加position:relative;属性

J 要把input直接放在form下面，可以用div或者fieldset把这个input包起来

K 有display:none的，将display:none 所在的层再用一个div包起来。

一些值得注意的解决办法和demo测试：

第二种情况我没有遇到过，但是这位童鞋遇到了：http://hi.baidu.com/niez/blog/item/d2f88977a6de011db151b92d.html

还有一位童鞋遇到的问题也很神奇，在这里：http://blog.gulu77.com/?p=524

一个老外提出的应对方法：http://www.ajaxupdates.com/decoy-fix-for-ie-duplicate-characters-bug/ 针对我遇到的问题无效，但是他的思路很有意思。