IE7的web标准之道——8：（修正）躲猫猫bug

IE7的web标准之道

IE历来被web标准的拥护者所诟病，而当FireFox横空出世以后，更多的网页制作者开始关注web标准设计。看着FireFox的市场占有率不停的上升，微软终于推出了IE7。但IE7是否真的能够力挽狂澜，是否真的能够得到用户的信任，是否真的能够得到网页设计者的认可呢？

且看《IE7的web标准之道》系列文章，和你一起见证IE7的改变！

躲猫猫，你来找我呀！

在上一篇文章中，我们曾经提到过这个bug，它的著名来源于它所表现出来的诡异现象。虽然今天是4月1日，但是这些都是真实的。为了大家能够进一步的记住这个诡异的bug，这里我将改变以往的写作方式，而是首先将现象演示给大家看。为了更好的表现出效果，这次我采用了flash的记录方式，点击这个图标即可看到flash映像。如果，你的浏览器不支持flash播放，请你直接下载flash文件，采用其他软件查看，给你带来不便，请谅解。

IE6躲猫猫bug效果截图（点击图片查看完整大图）

原来那儿有字呀！

如果只看上面的效果截图图片，你可能感觉有些纳闷。这是什么呀？不就是一个普通的没啥字的网页吗，没啥了不起的呀。但是当你看到这个网页的源码的时候，也许就会感到惊讶了——

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="YES!B/S!,web标准,杨正祎,博客园,实例代码" />
<meta name="Description" content="这是一个简单YES!B/S!文章示例页面,来自杨正祎的博客,http://justinyoung.cnblogs.com/" />
<title>YES!B/S!文章示例页面</title>
<style type="text/css">
#holder{
background-color:pink;  /***引起bug的重要因素，一种解释就是：那些消失的文字躲到了背景之后***/
/*** width:100%; 对最大的容器设置宽度，相对宽度和绝对宽度都可以，即可修正bug ***/
}
#holder a:hover{
background-color:deeppink; /***为了增强视觉效果而已，可以去掉。***/
}
#floater{
float:right;   /***引起bug的重要因素***/
width:135px;
height:310px; /***引起bug的重要因素，高度一定要大于那些文字的高度***/
border:1px solid green;
}
.clear{
clear:both;  /***引起bug的重要因素***/
}
#footer{ /***为了增强视觉效果而已，可以去掉。***/
height:50px;
border-top:1px solid blue;
}
</style>
</head>
<body>
<div id="holder">
<div id="floater">
i'm  floater!<br/ />
<a href="#" title=""><img alt="躲猫猫bug" src="http://www.cnblogs.com/images/cnblogs_com/justinyoung/2008_2q/ie7road81.jpg" /></a>
</div>
<div id="ghostHolder">
这个示例是为了演示IE6的“躲猫猫bug”，如果你用IE6浏览器浏览这个页面的时候，就会发现你看不到这些字了 囧rz~ 。<br/ />
IE7已经修正了这个bug，所以你用IE7浏览这个页面的时候，就能看到这些文字啦。<br/ />
这个示例页面来自杨正祎的博客<a target="_blank" href="http://justinyoung.cnblogs.com/" title="web标准推荐博客">【YES!B/S!】</a>，是<a target="_blank" href="http://www.cnblogs.com/JustinYoung/archive/2008/02/18/IE7_wsRoad_foreword.html" title="《IE7的web标准之道》">《IE7的web标准之道》</a>的系列文章中的一篇，此系列文章还在连载中，下面是已经发表的文章列表——
<ul style="list-style-type: disc">
<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/20/IE7_wsRoad_overflow.html" target="_blank">《IE7的web标准之道——3：（修正）引起页面布局混乱的祸首》</a> </li>
<li><a title="IE7的web标准之道——4：（修正）歌剧院魅影bug" href="http://www.cnblogs.com/JustinYoung/archive/2008/03/03/IE7_wsRoad_dup_characters.html" target="_blank">《IE7的web标准之道——4：（修正）歌剧院魅影bug》</a> </li>
<li><a title="IE7的web标准之道——5：（修正）上去了！终于上去了！" href="http://www.cnblogs.com/JustinYoung/archive/2008/03/11/IE7_wsRoad_div_select.html" target="_blank">《IE7的web标准之道——5：（修正）上去了！终于上去了！》</a> </li>
<li><a title="IE7的web标准之道——6：(修正)置换元素与行距bug" href="http://www.cnblogs.com/JustinYoung/archive/2008/03/20/line-height-bug.html" target="_blank">《IE7的web标准之道——6：（修正）置换元素与行距bug》</a> </li>
<li><a title="IE7的web标准之道——7：（修正）float双倍margin bug " href="http://www.cnblogs.com/JustinYoung/archive/2008/03/27/double-margin-float-bug.html" target="_blank">《IE7的web标准之道——7：（修正）float双倍margin bug 》</a> </li>
</ul>
</div>
<div class="clear"></div>
<div id="footer">
i'm footer from <a  target="_blank" href="http://justinyoung.cnblogs.com/" title="web标准推荐博客">【YES!B/S!】</a>
</div>
</div>
</body>
</html>

提示：可以先在文本框内，根据需要修改代码后再运行

猫猫躲到哪里去了呢？

看后源码，是否感到奇怪呢？那大片大片的文字都跑到那里去了呢？答案和往常一样令人遗憾——没有任何官方的说明和解释，只有江湖上比较得到认可的答案。

江湖上比较认可的解释是——被id为“#holder”那个div的背景颜色给盖住了。至于为什么会盖住，除了当初的IE6开发团队，没有人能给你答案。江湖上比较认可的说法是IE6对z-index的解释有问题。无论原因如何，但是效果却是的确产生了，这也的确是IE6的一个bug。好在，我们有办法可以解决它。

如何找到猫猫？

其实方法还蛮多的，如果仔细看网页源代码中关于CSS部分的注释，其实就已经可以找到一些答案。这里列出一些方案，供大家参考。如果你有更好的办法，请到【博客园web标准设计小组】赐教，小弟这里先谢过了。只要采用下面方法的任意一种即可消灭bug——

明确的指定最外面div容器（#holder）的宽度（相对宽度和绝对宽带都可以）。
去掉最外面div容器（#holder）的背景颜色（或者背景图片）
缩小浮动div容器（#floater）的高度到一定程度
不浮动div容器（#floater）
不使用<div class="clear"><div>技术

上面的方法只是理论上的，请根据实际需要采用不同的方法。另：这个bug在FireFox、safari、opera等浏览器下不会出现。因此本篇就没有截图。

外话：插一句和关于系列文章

插一句

以前有读者朋友问到：“这不是《IE7的web标准之道》吗？为什么讲的都是IE6的一些bug呀？有什么意义呀？”。其实意义很简单，这个系列讲到的所有bug，都是IE6中存在的，并且在IE7中已经得到修正的。是IE7相对于IE6的一种进步，也是IE7相对于IE6而言，更向web标准靠近的一种证明。现在浏览器市场IE6的份额依然很高，正是IE6、IE7和FireFox三分天下的时候。讲这些IE6独有的bug，并给出解决方案，对于如何让你的网页能够兼容更多的浏览器，如何让你的网页更健壮还是有些作用的（至少我是这样认为的 ^_^）。并不是说，你一个人使用的浏览器是IE7，或者说你周围朋友的浏览器是IE7，就能说明世界上所有的人都在使用IE7浏览器。作为网页的浏览者，你的确可以不在乎这些东西，但是作为苦命的网页制作者，这些东西还是有一定的作用的。可能是因为我以前没有说明清楚，所以给你带来了误解，抱歉。

关于系列文章

现在我主要在维护的两个系列是《IE7的web标准之道》、《阿一web标准学堂》。其中《IE7的web标准之道》是面向有一定网页制作基础的朋友的，而《阿一web标准学堂》则倾向于web标准初学者的朋友。为了更形象和生动，《阿一web标准学堂》采用视频讲解的方式（其实顺便强迫自己锻炼普通话也是重要原因囧rz~），希望大家能对视频中我的普通话进行监督哦。这两个系列的更新频率，我会努力控制在一周一篇（讲）。

另外的还有三个系列——《实例讲解IE8新特性》、《大家一起来博皮》以及《恶俗分享歌曲》系列。因为小弟时间和精力有限，所以只能在工作比较空闲的时候，不定期更新。对于关注这个3个系列的朋友，只能表示抱歉。