本文揭示了IE6中著名的“躲猫猫”Bug，详细解析了该Bug的现象及成因，并提供了多种修复方法。此外，作者还阐述了撰写这一系列文章的目的，即展示IE7相较于IE6在Web标准上的改进。
<div style="border-right: teal 1px dotted; border-top: teal 1px dotted; font-size: 9pt; float: right; border-left: teal 1px dotted; width: 115px; color: teal; border-bottom: teal 1px dotted; 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>在<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">上一篇文章</a>中，我们曾经提到过这个bug，它的著名来源于它所表现出来的诡异现象。虽然今天是4月1日，但是这些都是真实的。为了大家能够进一步的记住这个诡异的bug，这里我将改变以往的写作方式，而是首先将现象演示给大家看。为了更好的表现出效果，这次我采用了flash的记录方式，点击这个图标 <input class="thickbox btnTB" title="IE6躲猫猫bug展现映像" type="button" alt="#TB_inline?height=576&width=688&inlineId=lightboxContent" value="FLASH"> 即可看到flash映像。如果，你的浏览器不支持flash播放，请你直接<a title="IE6躲猫猫bug展现映像" href="http://downloads.cnblogs.com/justinyoung/download/peekaboo.swf" target="_blank">下载flash文件</a>，采用其他软件查看，给你带来不便，请谅解。</p>
<div class="floatMPic">
<a class="thickbox" title="IE6躲猫猫bug效果截图" href="http://images.cnblogs.com/cnblogs_com/justinyoung/2008_2q/ie7road82.gif" target="_blank"><img height="373" alt="IE6躲猫猫bug效果截图" src="http://images.cnblogs.com/cnblogs_com/justinyoung/2008_2q/ie7road82.gif" width="464"></a><br>
IE6躲猫猫bug效果截图（点击图片查看完整大图）</div>
<h4>原来那儿有字呀！</h4>
<p>如果只看上面的效果截图图片，你可能感觉有些纳闷。这是什么呀？不就是一个普通的没啥字的网页吗，没啥了不起的呀。但是当你看到这个网页的源码的时候，也许就会感到惊讶了——</p>
<textarea id="txtTestCode2" rows="12" cols="65"><!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://images.cnblogs.com/cnblogs_com/justinyoung/2008_2q/ie7road81.jpg" /></a>
</div><!--end: floater -->
<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><!--end: ghostHolder -->
<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><!--end: holder -->
</body>
</html>
</textarea><div style="clear: both; margin-bottom: 15px;">
<input type="button" value="运行代码"><input type="button" value="复制代码"><input type="button" value="另存代码"><span style="font-size: 9pt; color: #999;">提示：可以先在文本框内，根据需要修改代码后再运行</span>
</div>
<h4>猫猫躲到哪里去了呢？</h4>
<p>看后源码，是否感到奇怪呢？那大片大片的文字都跑到那里去了呢？答案和往常一样令人遗憾——没有任何官方的说明和解释，只有江湖上比较得到认可的答案。</p>
<p>江湖上比较认可的解释是——被id为“#holder”那个div的背景颜色给盖住了。至于为什么会盖住，除了当初的IE6开发团队，没有人能给你答案。江湖上比较认可的说法是IE6对z-index的解释有问题。无论原因如何，但是效果却是的确产生了，这也的确是IE6的一个bug。好在，我们有办法可以解决它。</p>
<h4>如何找到猫猫？</h4>
<p>其实方法还蛮多的，如果仔细看网页源代码中关于CSS部分的注释，其实就已经可以找到一些答案。这里列出一些方案，供大家参考。如果你有更好的办法，请到<a title="博客园web标准设计小组" href="http://space.cnblogs.com/group/w3c/" target="_blank">【博客园web标准设计小组】</a>赐教，小弟这里先谢过了。只要采用下面方法的任意一种即可消灭bug——</p>
<ul style="margin: 15px 2px 15px 25px;">
<li style="">明确的指定最外面div容器（#holder）的宽度（相对宽度和绝对宽带都可以）。
</li>
<li style="">去掉最外面div容器（#holder）的背景颜色（或者背景图片）
</li>
<li style="">缩小浮动div容器（#floater）的高度到一定程度
</li>
<li style="">不浮动div容器（#floater）
</li>
<li style="">不使用<div class="clear"><div>技术 </li>
</ul>
<p>上面的方法只是理论上的，请根据实际需要采用不同的方法。另：这个bug在FireFox、safari、opera等浏览器下不会出现。因此本篇就没有截图。</p>
<h4>外话：插一句和关于系列文章</h4>
<h5>插一句</h5>
<p>以前有读者朋友问到：“这不是《IE7的web标准之道》吗？为什么讲的都是IE6的一些bug呀？有什么意义呀？”。其实意义很简单，这个系列讲到的所有bug，都是IE6中存在的，并且在IE7中已经得到修正的。是IE7相对于IE6的一种进步，也是IE7相对于IE6而言，更向web标准靠近的一种证明。现在浏览器市场IE6的份额依然很高，正是IE6、IE7和FireFox三分天下的时候。讲这些IE6独有的bug，并给出解决方案，对于如何让你的网页能够兼容更多的浏览器，如何让你的网页更健壮还是有些作用的（至少我是这样认为的 ^_^）。并不是说，你一个人使用的浏览器是IE7，或者说你周围朋友的浏览器是IE7，就能说明世界上所有的人都在使用IE7浏览器。作为网页的浏览者，你的确可以不在乎这些东西，但是作为苦命的网页制作者，这些东西还是有一定的作用的。可能是因为我以前没有说明清楚，所以给你带来了误解，抱歉。</p>
<h5>关于系列文章</h5>
<p>现在我主要在维护的两个系列是<a title="IE7的web标准之道 " href="http://www.cnblogs.com/JustinYoung/archive/2008/02/18/IE7_wsRoad_foreword.html" target="_blank">《IE7的web标准之道》</a>、<a title="阿一web标准学堂" href="http://www.cnblogs.com/JustinYoung/archive/2008/03/30/ayi01-what-is-web-standards.html" target="_blank">《阿一web标准学堂》</a>。其中《IE7的web标准之道》是面向有一定网页制作基础的朋友的，而《阿一web标准学堂》则倾向于web标准初学者的朋友。为了更形象和生动，《阿一web标准学堂》采用视频讲解的方式（其实顺便强迫自己锻炼普通话也是重要原因 囧rz~），希望大家能对视频中我的普通话进行监督哦。这两个系列的更新频率，我会努力控制在一周一篇（讲）。</p>
<p>另外的还有三个系列——<a title="《实例讲解IE8新特性》" href="http://www.cnblogs.com/JustinYoung/archive/2008/03/17/IE8-WebSlices.html" target="_blank">《实例讲解IE8新特性》</a>、<a title="《大家一起来博皮》" href="http://www.cnblogs.com/JustinYoung/tag/%E5%8D%9A%E7%9A%AE" target="_blank">《大家一起来博皮》</a>以及<a title="《恶俗分享歌曲》" href="http://www.cnblogs.com/JustinYoung/tag/%E6%81%B6%E4%BF%97%E5%88%86%E4%BA%AB%E6%AD%8C%E6%9B%B2" target="_blank">《恶俗分享歌曲》</a>系列。因为小弟时间和精力有限，所以只能在工作比较空闲的时候，不定期更新。对于关注这个3个系列的朋友，只能表示抱歉。</p>
<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="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/12/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>
<li>
<a title="博客园web标准设计小组" href="http://space.cnblogs.com/group/w3c/" target="_blank">【博客园web标准设计小组】</a> </li>
</ul>
<div class="hide" id="lightboxContent">
<div> </div>
</div>
<!--end: lightboxContent -->
<style type="text/css">
.hide{display:none;}.btnTB{border:none;width:80px;height:15px;background:url('http://downloads.cnblogs.com/justinyoung/common/popbutton.gif') no-repeat;cursor:pointer;color:#eee;font-size:10px;}#TB_window{font:12px Arial,Helvetica,sans-serif;color:#333}#TB_secondLine{font:10px Arial,Helvetica,sans-serif;color:#666}#TB_window a:link{color:#666}#TB_window a:visited{color:#666}#TB_window a:hover{color:#000}#TB_window a:active{color:#666}#TB_window a:focus{color:#666}#TB_overlay{position:fixed;z-index:100;top:0px;left:0px;height:100%;width:100%}.TB_overlayMacFFBGHack{background:url(macFFBgHack.png) repeat}.TB_overlayBG{background-color:#000;filter:alpha(opacity=75);-moz-opacity:0.75;opacity:0.75}* html #TB_overlay{ position:absolute; height:expression(document.body.scrollHeight >document.body.offsetHeight ? document.body.scrollHeight:document.body.offsetHeight+'px')}#TB_window{position:fixed;background:#fff;z-index:102;color:#000;display:none;border:4px solid #525252;text-align:left;top:50%;left:50%}* html #TB_window{position:absolute;margin-top:expression(0 - parseInt(this.offsetHeight / 2)+(TBWindowMargin = document.documentElement &&document.documentElement.scrollTop || document.body.scrollTop)+'px')}#TB_window img#TB_Image{display:block;margin:15px 0 0 15px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;border-top:1px solid #666;border-left:1px solid #666}#TB_caption{height:25px;padding:7px 30px 10px 25px;float:left}#TB_closeWindow{height:25px;padding:11px 25px 10px 0;float:right}#TB_closeAjaxWindow{padding:7px 10px 5px 0;margin-bottom:1px;text-align:right;float:right}#TB_ajaxWindowTitle{float:left;padding:7px 0 5px 10px;margin-bottom:1px}#TB_title{background-color:#e8e8e8;height:27px}#TB_ajaxContent{clear:both;padding:2px 15px 15px 15px;overflow:auto;text-align:left;line-height:1.4em}#TB_ajaxContent.TB_modal{padding:15px}#TB_ajaxContent p{padding:5px 0px 5px 0px}#TB_load{position:fixed;display:none;height:13px;width:208px;z-index:103;top:50%;left:50%;margin:-6px 0 0 -104px}* html #TB_load{position:absolute;margin-top:expression(0 - parseInt(this.offsetHeight / 2)+(TBWindowMargin = document.documentElement &&document.documentElement.scrollTop || document.body.scrollTop)+'px')}#TB_HideSelect{z-index:99;position:fixed;top:0;left:0;background-color:#fff;border:none;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;height:100%;width:100%}* html #TB_HideSelect{ position:absolute; height:expression(document.body.scrollHeight >document.body.offsetHeight ? document.body.scrollHeight:document.body.offsetHeight+'px')}#TB_iframeContent{clear:both;border:none;margin-bottom:-1px;margin-top:1px;_margin-bottom:1px}
</style>
<!--========灯箱效果需要==================-->
<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>在<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">上一篇文章</a>中，我们曾经提到过这个bug，它的著名来源于它所表现出来的诡异现象。虽然今天是4月1日，但是这些都是真实的。为了大家能够进一步的记住这个诡异的bug，这里我将改变以往的写作方式，而是首先将现象演示给大家看。为了更好的表现出效果，这次我采用了flash的记录方式，点击这个图标 <input class="thickbox btnTB" title="IE6躲猫猫bug展现映像" type="button" alt="#TB_inline?height=576&width=688&inlineId=lightboxContent" value="FLASH"> 即可看到flash映像。如果，你的浏览器不支持flash播放，请你直接<a title="IE6躲猫猫bug展现映像" href="http://downloads.cnblogs.com/justinyoung/download/peekaboo.swf" target="_blank">下载flash文件</a>，采用其他软件查看，给你带来不便，请谅解。</p>
<div class="floatMPic">
<a class="thickbox" title="IE6躲猫猫bug效果截图" href="http://images.cnblogs.com/cnblogs_com/justinyoung/2008_2q/ie7road82.gif" target="_blank"><img height="373" alt="IE6躲猫猫bug效果截图" src="http://images.cnblogs.com/cnblogs_com/justinyoung/2008_2q/ie7road82.gif" width="464"></a><br>
IE6躲猫猫bug效果截图（点击图片查看完整大图）</div>
<h4>原来那儿有字呀！</h4>
<p>如果只看上面的效果截图图片，你可能感觉有些纳闷。这是什么呀？不就是一个普通的没啥字的网页吗，没啥了不起的呀。但是当你看到这个网页的源码的时候，也许就会感到惊讶了——</p>
<textarea id="txtTestCode2" rows="12" cols="65"><!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://images.cnblogs.com/cnblogs_com/justinyoung/2008_2q/ie7road81.jpg" /></a>
</div><!--end: floater -->
<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><!--end: ghostHolder -->
<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><!--end: holder -->
</body>
</html>
</textarea><div style="clear: both; margin-bottom: 15px;">
<input type="button" value="运行代码"><input type="button" value="复制代码"><input type="button" value="另存代码"><span style="font-size: 9pt; color: #999;">提示：可以先在文本框内，根据需要修改代码后再运行</span>
</div>
<h4>猫猫躲到哪里去了呢？</h4>
<p>看后源码，是否感到奇怪呢？那大片大片的文字都跑到那里去了呢？答案和往常一样令人遗憾——没有任何官方的说明和解释，只有江湖上比较得到认可的答案。</p>
<p>江湖上比较认可的解释是——被id为“#holder”那个div的背景颜色给盖住了。至于为什么会盖住，除了当初的IE6开发团队，没有人能给你答案。江湖上比较认可的说法是IE6对z-index的解释有问题。无论原因如何，但是效果却是的确产生了，这也的确是IE6的一个bug。好在，我们有办法可以解决它。</p>
<h4>如何找到猫猫？</h4>
<p>其实方法还蛮多的，如果仔细看网页源代码中关于CSS部分的注释，其实就已经可以找到一些答案。这里列出一些方案，供大家参考。如果你有更好的办法，请到<a title="博客园web标准设计小组" href="http://space.cnblogs.com/group/w3c/" target="_blank">【博客园web标准设计小组】</a>赐教，小弟这里先谢过了。只要采用下面方法的任意一种即可消灭bug——</p>
<ul style="margin: 15px 2px 15px 25px;">
<li style="">明确的指定最外面div容器（#holder）的宽度（相对宽度和绝对宽带都可以）。
</li>
<li style="">去掉最外面div容器（#holder）的背景颜色（或者背景图片）
</li>
<li style="">缩小浮动div容器（#floater）的高度到一定程度
</li>
<li style="">不浮动div容器（#floater）
</li>
<li style="">不使用<div class="clear"><div>技术 </li>
</ul>
<p>上面的方法只是理论上的，请根据实际需要采用不同的方法。另：这个bug在FireFox、safari、opera等浏览器下不会出现。因此本篇就没有截图。</p>
<h4>外话：插一句和关于系列文章</h4>
<h5>插一句</h5>
<p>以前有读者朋友问到：“这不是《IE7的web标准之道》吗？为什么讲的都是IE6的一些bug呀？有什么意义呀？”。其实意义很简单，这个系列讲到的所有bug，都是IE6中存在的，并且在IE7中已经得到修正的。是IE7相对于IE6的一种进步，也是IE7相对于IE6而言，更向web标准靠近的一种证明。现在浏览器市场IE6的份额依然很高，正是IE6、IE7和FireFox三分天下的时候。讲这些IE6独有的bug，并给出解决方案，对于如何让你的网页能够兼容更多的浏览器，如何让你的网页更健壮还是有些作用的（至少我是这样认为的 ^_^）。并不是说，你一个人使用的浏览器是IE7，或者说你周围朋友的浏览器是IE7，就能说明世界上所有的人都在使用IE7浏览器。作为网页的浏览者，你的确可以不在乎这些东西，但是作为苦命的网页制作者，这些东西还是有一定的作用的。可能是因为我以前没有说明清楚，所以给你带来了误解，抱歉。</p>
<h5>关于系列文章</h5>
<p>现在我主要在维护的两个系列是<a title="IE7的web标准之道 " href="http://www.cnblogs.com/JustinYoung/archive/2008/02/18/IE7_wsRoad_foreword.html" target="_blank">《IE7的web标准之道》</a>、<a title="阿一web标准学堂" href="http://www.cnblogs.com/JustinYoung/archive/2008/03/30/ayi01-what-is-web-standards.html" target="_blank">《阿一web标准学堂》</a>。其中《IE7的web标准之道》是面向有一定网页制作基础的朋友的，而《阿一web标准学堂》则倾向于web标准初学者的朋友。为了更形象和生动，《阿一web标准学堂》采用视频讲解的方式（其实顺便强迫自己锻炼普通话也是重要原因 囧rz~），希望大家能对视频中我的普通话进行监督哦。这两个系列的更新频率，我会努力控制在一周一篇（讲）。</p>
<p>另外的还有三个系列——<a title="《实例讲解IE8新特性》" href="http://www.cnblogs.com/JustinYoung/archive/2008/03/17/IE8-WebSlices.html" target="_blank">《实例讲解IE8新特性》</a>、<a title="《大家一起来博皮》" href="http://www.cnblogs.com/JustinYoung/tag/%E5%8D%9A%E7%9A%AE" target="_blank">《大家一起来博皮》</a>以及<a title="《恶俗分享歌曲》" href="http://www.cnblogs.com/JustinYoung/tag/%E6%81%B6%E4%BF%97%E5%88%86%E4%BA%AB%E6%AD%8C%E6%9B%B2" target="_blank">《恶俗分享歌曲》</a>系列。因为小弟时间和精力有限，所以只能在工作比较空闲的时候，不定期更新。对于关注这个3个系列的朋友，只能表示抱歉。</p>
<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="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/12/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>
<li>
<a title="博客园web标准设计小组" href="http://space.cnblogs.com/group/w3c/" target="_blank">【博客园web标准设计小组】</a> </li>
</ul>
<div class="hide" id="lightboxContent">
<div> </div>
</div>
<!--end: lightboxContent -->
<style type="text/css">
.hide{display:none;}.btnTB{border:none;width:80px;height:15px;background:url('http://downloads.cnblogs.com/justinyoung/common/popbutton.gif') no-repeat;cursor:pointer;color:#eee;font-size:10px;}#TB_window{font:12px Arial,Helvetica,sans-serif;color:#333}#TB_secondLine{font:10px Arial,Helvetica,sans-serif;color:#666}#TB_window a:link{color:#666}#TB_window a:visited{color:#666}#TB_window a:hover{color:#000}#TB_window a:active{color:#666}#TB_window a:focus{color:#666}#TB_overlay{position:fixed;z-index:100;top:0px;left:0px;height:100%;width:100%}.TB_overlayMacFFBGHack{background:url(macFFBgHack.png) repeat}.TB_overlayBG{background-color:#000;filter:alpha(opacity=75);-moz-opacity:0.75;opacity:0.75}* html #TB_overlay{ position:absolute; height:expression(document.body.scrollHeight >document.body.offsetHeight ? document.body.scrollHeight:document.body.offsetHeight+'px')}#TB_window{position:fixed;background:#fff;z-index:102;color:#000;display:none;border:4px solid #525252;text-align:left;top:50%;left:50%}* html #TB_window{position:absolute;margin-top:expression(0 - parseInt(this.offsetHeight / 2)+(TBWindowMargin = document.documentElement &&document.documentElement.scrollTop || document.body.scrollTop)+'px')}#TB_window img#TB_Image{display:block;margin:15px 0 0 15px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;border-top:1px solid #666;border-left:1px solid #666}#TB_caption{height:25px;padding:7px 30px 10px 25px;float:left}#TB_closeWindow{height:25px;padding:11px 25px 10px 0;float:right}#TB_closeAjaxWindow{padding:7px 10px 5px 0;margin-bottom:1px;text-align:right;float:right}#TB_ajaxWindowTitle{float:left;padding:7px 0 5px 10px;margin-bottom:1px}#TB_title{background-color:#e8e8e8;height:27px}#TB_ajaxContent{clear:both;padding:2px 15px 15px 15px;overflow:auto;text-align:left;line-height:1.4em}#TB_ajaxContent.TB_modal{padding:15px}#TB_ajaxContent p{padding:5px 0px 5px 0px}#TB_load{position:fixed;display:none;height:13px;width:208px;z-index:103;top:50%;left:50%;margin:-6px 0 0 -104px}* html #TB_load{position:absolute;margin-top:expression(0 - parseInt(this.offsetHeight / 2)+(TBWindowMargin = document.documentElement &&document.documentElement.scrollTop || document.body.scrollTop)+'px')}#TB_HideSelect{z-index:99;position:fixed;top:0;left:0;background-color:#fff;border:none;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;height:100%;width:100%}* html #TB_HideSelect{ position:absolute; height:expression(document.body.scrollHeight >document.body.offsetHeight ? document.body.scrollHeight:document.body.offsetHeight+'px')}#TB_iframeContent{clear:both;border:none;margin-bottom:-1px;margin-top:1px;_margin-bottom:1px}
</style>
<!--========灯箱效果需要==================-->
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
