IE6 Peekaboo(躲躲猫) Bug

IE6 Peekaboo(躲躲猫) Bug

Peekaboo本意就是“躲躲猫”游戏(捉迷藏)，这个BUG也是这样，让你的页面内容时隐时现。 
关于这个BUG的原文在这里：http://www.positioniseverything.net/explorer/peekaboo.html
里面使用了很多辅助元素来形象的说明和演示这个BUG，如果你英文不是很好或者其他原因，你可以看下面的讲解。

在一个div#box里面放置一个浮动的div#float（例如：里面的内容是2行文字）和一个没有任何 CSS样式的div#content（例如：里面的内容是1行文字），然后在它们的下面放置一个div#clear（例如：里面的内容是1行文字）。

演示html代码：

<style type="text/css">
    #box {background: #eee;}
    #float {float : left;}
    #clear {clear: both;}
</style>
 
<div id="box">
    <div id="float">左边漂浮的任意内容<br />这是为了比右边的内容高一点</div>
    <div id="content">任意输入的内容</div>
    <div id="clear">下面清除的标签</div>  
</div>


这样的话在IE7及其它标准浏览器浏览是没有问题的，分别显示出这3块文字内容，但是在IE下浏览时就只显示出了div#float、div#clear里面的内容(演示)，div#content就莫明奇妙的消失了，在哪里？你把鼠标放在应该显示的地方划一划，就出现了本该出现的内容。也就是在变化背景的时候它就会出现，你也可以在div#clear下面放置很长很长的内容，也就是使浏览器出现滚动条，你向下拖动滚动条再拖回来，它一样也出现了，这样就明白了它为什么叫Peekaboo！

修复Peekaboo Bug几种方法:

● 不要在div#box里面使用背景，或者保持div#clear和div#float在一起。
● 给div#box一个明确的“宽度”或“高度” 。
#box { 
height: 100%; /* kill peekaboo bug in IE */
}
● 把div#box和div#float的定位类型都设置为“相对”。