IE7的web标准之道——4：（修正）歌剧院魅影bug

<div style="border: 1px dotted teal; font-size: 9pt; float: right; width: 115px; color: teal; text-align: center;">
<img alt="" src="http://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/ie7road.png"><br>
IE7的web标准之道</div>
<p>IE历来被web标准的拥护者所诟病，而当FireFox横空出世以后，更多的网页制作者开始关注web标准设计。看着FireFox的市场占有率不停的上升，微软终于推出了IE7。但IE7是否真的能够力挽狂澜，是否真的能够得到用户的信任，是否真的能够得到网页设计者的认可呢？</p>
<p>且看《IE7的web标准之道》系列文章，和你一起见证IE7的改变！</p>
<h4>打倒标题党</h4>
<p>估计很多的朋友都是因为这个华丽的“歌剧院魅影”一词进来的。其实这纯粹是一个标题党作为，纯粹是吸引眼球而已。其实这个bug和歌剧院半毛钱关系都没有。这个bug在国际上比较获得认可的名字叫做——“IE6重复文字bug”。这是一个非常好玩但是有很令人摸不到头脑的bug。如果，你不知道产生原因的话，将会令人非常头痛。这也是我在现实工作中真正遇到过的情况。这篇文章记载了当时我惊讶而不可奈何的心情——<a title="Ghost in IE6.web标准网页IE6中的幽灵" href="http://www.cnblogs.com/JustinYoung/archive/2007/06/14/783958.html" target="_blank">《Ghost in IE6.web标准网页IE6中的幽灵》</a></p>
<h4>魅影再现</h4>
<p>在IE6浏览器下运行下面的代码，便可以重现bug。IE7已经修正了此bug。</p>
<textarea id="txtTestCode2" rows="12" cols="65"> &lt;!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;meta name="Keywords" content="YES!B/S!,web标准,杨正祎,博客园,实例代码" /&gt;
&lt;meta name="Description" content="这是一个简单YES!B/S!文章示例页面,来自杨正祎的博客,http://justinyoung.cnblogs.com/" /&gt;
&lt;title&gt;YES!B/S!文章示例页面&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div style="width:200px;"&gt;
&lt;div style="float:left;"&gt;&lt;/div&gt;
&lt;!-- 如果是IE6，你将多看到一个&amp;#8220;影&amp;#8221;字 --&gt;
&lt;div style="float:left;width:200px;"&gt;歌剧院的魅影&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</textarea><div style="clear: both; margin-bottom: 15px;">
<input value="运行代码" type="button"><input value="复制代码" type="button"><input value="另存代码" type="button"><span style="font-size: 9pt; color: #999999;">提示：可以先在文本框内，根据需要修改代码后再运行</span>
</div>
<p>下面是上面测试页面分别在IE6，IE7，FireFox（版本2.0.0，12）和Oepra（版本9.25）中的显示效果截图（IE6和IE7共存的方法，可以参考文章<a title="IE6和IE7共存方法（别人是别人的，我是我的）" href="http://www.cnblogs.com/JustinYoung/archive/2007/09/11/889801.html" target="_blank">《IE6和IE7共存方法（别人是别人的，我是我的）》</a>）。</p>
<div class="floatMPic">
<a title="IE7的web标准之道" href="http://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/ie7road41.gif" target="_blank"><img alt="IE7的web标准之道" src="http://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/ie7road41.gif"></a><br>
“歌剧院魅影bug”重现页面截图，注意IE6中鼠标所指位置</div>
<p>通过截图，你会惊讶的看到在IE6中，多出了一个“影”字。下面来讲讲出现这个“影”字的一些条件（bug重现条件）——</p>
<ul style="">
<li>一个容器包含2两个具有“float”样式的子容器。
    </li>
    <li>第二个容器的宽度大于父容器的宽度，或者父容器宽度减去第二个容器宽度的值小于3。（说到3，这里稍微多说一句——IE7还修正了IE6中的一个bug，bug名字就叫做“3像素bug”）
    </li>
    <li>在第二个容器前存在注释（这也是为什么此bug也叫做“IE6注释bug”的原因）。
    </li>
    <li>其他的，我暂时尚未发现的条件。 </li>
</ul>
<h4>为何会出现魅影</h4>
<p>bug虽然的的确确的存在，但是为什么会出现这样的bug依然没有统一的定论。不同的高手也是各执一词，谁也说服不了谁。真正的原因也许只有当时的IE6团队才能道出来，但是现在仍然没有官方的说法。下面列出来的这两种说法，是只是现在网上认可度比较高的而已——</p>
<ul style="">
<li>IE6浏览器对&lt;!-- --&gt;注释的解释存在bug引起的。
    </li>
    <li>“3像素bug”的扩展后遗症。（“3像素bug”我们将在《IE7的web标准之道》系列以后的文章中讲到）
    </li>
    <li>其他的一些说法 </li>
</ul>
<h4>如何消灭魅影</h4>
<p>引起的原因，也许我们可以不知道，但是如何去消除却是我们一定要关注的。</p>
<p>“歌剧院魅影bug”已经在IE7中得到修正，在FireFox和Opera中也不会出现，所以bug的修正主要是针对IE6的。</p>
<p>针对于上文中讲到的“bug重现条件”，如果要修正bug，只要让任何一个条件不满足即可——</p>
<ul style="">
<li>改变结构，不出现【一个容器包含2两个具有“float”样式的子容器】的结构。<br>
    ——此解决方案的评论：疯了！因噎废食的做法。
    </li>
    <li>减小第二个容器的宽度，使父容器宽度减去第二个容器宽度的值大于3，例如将本文示例中第二个子容器的宽度改为197px。<br>
    ——此解决方案的评论：在满足页面布局的前提下可以使用。但是当情况比较复杂的时候，可能实施起来比较困难。
    </li>
    <li>去掉所有的注释。<br>
    ——此解决方案的评论：最直接的做法，但是“没有注释的代码”，的确不是一个好的代码写作习惯。
    </li>
    <li>修正注释的写法。将 <span style="color: #408020; background-color: #cccccc;">&lt;!-- 这里是注释内容 --&gt;</span>写成<span style="color: #408020; background-color: #cccccc;">&lt;!--[if !IE]&gt;这里是注释内容&lt;![endif]--&gt;</span><br>
    ——此解决方案的评论：还不错的解决方案，但是并不是每个人都对<span style="color: #408020; background-color: #cccccc;">&lt;!--[if !IE]&gt;这里是注释内容[endif]--&gt;</span>这种注释写法很欣赏。
    </li>
    <li>在第二个容器后面加一个或者多个&lt;div style="clear"&gt;&lt;/div&gt;来解决。<br>
    ——此解决方案的评论：另人感觉很不爽的解决方案。但是的确能解决。影响网页效率</li>
    <li>其他的你提供的方法 </li>
</ul>
<h4>关于此bug的一些文章资料</h4>
<p>其实很早以前就有外国的朋友关注过这个bug，而且在中国也有过一些朋友关注过这个bug。我在写这篇文章的时候，也一定程度上参照了他们的研究成果，在此向研究此问题的前辈们表示感谢。下面是两篇研究此bug的文章。希望对你有进一步的帮助。</p>
<ul style="">
<li>Holly 'n John 于2004年2月18号发表的一篇文章： <a title="Explorer 6 Duplicate Characters Bug " href="http://www.positioniseverything.net/explorer/dup-characters.html" target="_blank">《Explorer 6 Duplicate Characters Bug 》</a>，这是关于此bug比较权威的一篇文章。
    </li>
    <li>经典论坛版主怿飞的<a title="注释在IE中造成文字溢出的研究" href="http://www.planabc.net/2006/10/06/comment_ie_bug/" target="_blank">《注释在IE中造成文字溢出的研究》</a>。顺便说一下怿飞是一个在web标准方便很有研究的朋友。虽然没有直接和他接触过，但是却一直拜读他的文章。在此也给这位文章曾给予我很大帮助的朋友做个广告，他的博客为地址为：<a title="怿飞" href="http://www.planabc.net/" target="_blank">http://www.planabc.net/</a>。 </li>
</ul>
<h4>相关文章列表</h4>
<ul style="">
<li>
<a title="《IE7的web标准之道——1：前言》 " href="http://www.cnblogs.com/JustinYoung/archive/2008/02/18/IE7_wsRoad_foreword.html" target="_blank">《IE7的web标准之道——1：前言（兼目录）》 </a>
    </li>
    <li>
<a title="IE7的web标准之道——2：（改进）更丰富的CSS选择符" href="http://www.cnblogs.com/JustinYoung/archive/2008/02/20/IE7_wsRoad_selector.html" target="_blank">《IE7的web标准之道——2：（改进）更丰富的CSS选择符》</a>
    </li>
    <li>
<a title="IE7的web标准之道——3：（修正）引起页面布局混乱的祸首" href="http://www.cnblogs.com/JustinYoung/archive/2008/02/25/IE7_wsRoad_overflow.html" target="_blank">《IE7的web标准之道——3：（修正）引起页面布局混乱的祸首 》</a>
    </li>
    <li>
<a title="《IE6和IE7共存方法（别人是别人的，我是我的）》" href="http://www.cnblogs.com/JustinYoung/archive/2007/09/11/889801.html" target="_blank">《IE6和IE7共存方法（别人是别人的，我是我的）》</a>
    </li>
    <li>
<a title="《Ghost in IE6.web标准网页IE6中的幽灵》" href="http://www.cnblogs.com/JustinYoung/archive/2007/06/14/783958.html" target="_blank">《Ghost in IE6.web标准网页IE6中的幽灵》</a>
    </li>
    <li>
<a title="《Explorer 6 Duplicate Characters Bug》" href="http://www.positioniseverything.net/explorer/dup-characters.html" target="_blank">《Explorer 6 Duplicate Characters Bug》</a>
    </li>
    <li>
<a title="《注释在IE中造成文字溢出的研究》" href="http://www.planabc.net/2006/10/06/comment_ie_bug/" target="_blank">《注释在IE中造成文字溢出的研究》</a> </li>
</ul>