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>  
<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的定位类型都设置为“相对”。

点击数：