May
04
之前有讲过 IE6 下多余的注释会引起浮动容器的字符复制BUG。根据这个原理，解决了不少相似的问题，不过这次碰到情况的却让人很头疼，原因是这次出问题的是iframe。
废话不多讲，直接看代码：
<!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">
<div style="width:600px;border:10px solid #000"><div style="float:left;width:100%;background-color:#f0f0f0;height:500px;"></div><!--罪魁祸首一-->
<!--罪魁祸首二-->
<div style="float:left;width:230px;margin-left:-240px;border:5px solid #36C;"><div style="border:3px solid #ccc;height:100px;background-color:#f1f1f1;"><br /><br />正常的div容器一</div><iframe style="width:200px;border:5px solid #ddd" frameborder="0"></iframe>
</div>
</div>
这种特定情况下，本应该在左侧框框里的iframe莫名其妙的跑到左下角了。把iframe换成div，则div内部的文字会被复制（复制的个数和注释的个数相同），但div容器还在左侧框框内，和iframe不同！
<!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">
<div style="width:600px;border:10px solid #000"><div style="float:left;width:100%;background-color:#f0f0f0;height:500px;"></div><!--罪魁祸首一-->
<!--罪魁祸首二-->
<div style="float:left;width:230px;margin-left:-240px;border:5px solid #36C;"><div style="border:3px solid #ccc;height:100px;background-color:#f1f1f1;"><br /><br />正常的div容器一</div><div style="width:200px;border:5px solid #ddd" >注意这里的文字要被复制喽</div></div>
</div>
去除任意一个或多个“罪魁祸首”注释，则两种情况都恢复正常。
<!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">
<div style="width:600px;border:10px solid #000"><div style="float:left;width:100%;background-color:#f0f0f0;height:500px;"></div><!--罪魁祸首一-->
<div style="float:left;width:230px;margin-left:-240px;border:5px solid #36C;"><div style="border:3px solid #ccc;height:100px;background-color:#f1f1f1;"><br /><br />正常的div容器一</div><iframe style="width:200px;border:5px solid #ddd" frameborder="0"></iframe>
</div>
</div>
还是那句话，慎用多行注释！
一般不用iframe