ie6注释造成文字“重影”分析
这是ie6的一个经典bug。下面看问题分析：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 </head> 7 8 <body> 9 <div style="width:400px"> 10 <div style="float:left;width:40px;background:#33CCFF">左</div> 11 <!---注释文字--> 12 <div style="float:left;width:40px;background:#eee">中</div> 13 <!---注释文字--> 14 <div style="float:right;width:320px;background:#FFFF00">右：这就是多出来的那只猪</div> 15 </div> 16 </body> 17 </html>
预览的效果是这样的：
-----------------------------------------------------------------------------------------------------------------------
我们会发现多出了“那只猪”三个字，这是为什么呢？
1、经过多个浏览器测试，发现只有ie6有这种情况。
说明：这是ie6的bug，其他浏览器正常。
2、去掉左中右当中任意一个里面的浮动，你会发现，不会出现重影的情况。去掉任意一个div里面的宽度，你也会发现，重影消失了。去掉任意一个注释，字数会减少为一个。三个注释，重影字为5个，两个注释，重影字为3个，一个注释，重影字为1个。
说明：这个bug与浮动和宽度以及注释的条数都有关，注释必须在两个浮动的div之间才会让重影出现，否则不会影响。并且：溢出文字的字数=注释的条数 *2-1，这里的字数在中文或英文数字时都成立。
3、去掉左div或者中div，你会发现，重影消失了，但是如果剩下的那两个div的宽度之和等于最外层div的宽度的话，又会出现重影，并且多出来的字，只有一个字，且为最后一个，而不是之前的三个。
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <div style="width:400px"> <div style="float:left;width:80px;background:#eee">中</div> <!---注释文字--> <div style="float:right;width:320px;background:#FFFF00">右：这就是多出来的那只猪</div> </div> </body> </html>
说明：只有当宽度和为外层宽度之和时，浮动，注释同时存在时，便会出现重影，切重影的字数与注释条数密切相关。
------------------------------------------------------------------------------------------------------------------------------
分析完毕，我们来看一下解决办法：
1、最简单的就是直接去掉浮动元素之间的注释。
2、或者去掉两个浮动元素的宽度，但是一般这样会影响排版，建议采用第一种方法。
2012.11.1，今天修复bug重新遇到了这个问题，根据大虾们的博客，发现还有很多好的解决办法，这里罗列下来：
3、使用条件注释，这样可以轻松的避开这个Bug。有关于条件注释的使用，大家可以点击《浏览器兼容之旅的第一站:如何创建条件样式》查阅。我们来看代码：
<!-- 这里是注释内容 -->写成：
<!--[if !IE]>这里是注释内容<![endif]-->
4、给溢出的文字外层加一个div或者span。
5、在第二个容器后面加一个或者多个<div style="clear"></div>来解决。此解决方案另人感觉很不爽，但是的确能解决，会影响网页效率 。
6、在两个浮动元素的外层加div，并让这个div，display：inline;
大虾们的方法还是很多的，有些情况适用，有些不适用，但是至少说明方法总比困难多。
///////////////////////////////////////////////////////////////////////////////////////////////
20131210，遇到了一个ie6下面重影的代码，去掉a标签内的display：block，居然就没有重影了，表示很费解。
