这是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、或者去掉两个浮动元素的宽度，但是一般这样会影响排版，建议采用第一种方法。
1993
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
