IE6灵异事件之歌剧院魅影

网络整理 - 07-27

首先来看一下含有同样代码的一个页面在IE6和其它版本/浏览器中的差异，第一张图为IE6下效果，第二张图为Firefox 3.6.13下效果，看完下面两张图你会惊异的发现，在IE6中父容器底部灵异的多出了一个“影”字，而在IE7+以及Firefox等其它浏览器中没有这种现象，这个Bug也经常被叫做“IE6注释Bug”、“IE6重复字符Bug”和“歌剧院魅影”等不同的名字。

为何会出现歌剧院魅影？

目前对该Bug还没有官方的解释，至今被广泛认可的一种说法是IE6浏览器对注释的解释存在Bug引起的，从而出现“3像素Bug”后遗症而产生的，下边这段代码就会在IE6下产生诡异的歌剧魅影效果。

HTML结构：

<div id="wrapper">
<div id="left">Left</div>

<div id="right">Right 歌剧院魅影</div>
</div>
CSS样式：

#wrapper {
width:300px;
height:200px;
background:aqua;
}
#left {
float:left;
width:150px;
height:100%;
background:silver;
}
#right {
float:right;
width:150px;
height:100%;
background:orange;
word-wrap:break-word;
}
解决方法：

1、改变HTML结构，绕过“一个容器包含有多个Float子容器”的结构。
2、如果包含的浮动子容器既有左浮动，又有右浮动，则使得父容器的宽度大于内部所有容器的宽度之和6px即可；如果包含的浮动子容器只有单一方向的浮动，则使得父容器的宽度大于内部所有容器的宽度之和3px即可（既可以使用width，也可以使用3px负边距）。
3、去掉目标代码中所有的注释。
4、修正注释的写法，将 <!– 这里是注释内容 –>写成<!–[if !IE]>这里是注释内容<![endif]–>
5、将产生魅影的浮动子容器的代码写成如下结构。

<div id="wrapper">
<div id="left">Left</div>

<div id="right">
Right 歌剧院魅影
</div>
</div>
其中本人最为赞赏其中的第二种和第四种方法，第二种方法只需针对IE6做宽度或者负边距hack(_)即可，而方法四只需要用正则将代码中所有注释统一替换即可，而其它的方法要么因噎废食，要么过于繁琐、脱离实际，本人在测试该Bug中偶然发现的第五种方法甚至找不到合理的解释来说明。

第二种修正方法的具体实现：

<div id="wrapper">
<div id="left">Left</div>

<div id="right">Right 歌剧院魅影</div>
<div class="clear"></div>
</div>
第四种修正方法的具体实现：

#right {
_margin-left:-6px;
}
或者

#right {
_width:144px;
}