IE6灵异事件之歌剧院魅影

来源:互联网 时间:1970-01-01

首先来看一下含有同样代码的一个页面在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>
 <!--[if !IE]>我是注释<![endif]-->
 <div id="right">Right 歌剧院魅影</div>
 <div class="clear"></div>
</div>
第四种修正方法的具体实现:


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

 #right {
 _width:144px;
}


相关阅读:
Top