IE6 Peekaboo(躲躲猫) Bug

 

IE6 Peekaboo(躲躲猫) BugPeekaboo本意就是“躲躲猫”游戏(捉迷藏)，这个BUG也是这样，让你的页面内容时隐时现。 关于这个BUG的原文在这里：http://www.positioniseverything.net/explorer/peekaboo.html里面使用了很多辅助元素来形象的说明和演示这个BUG，如果你英文不是很好或者其他原因，你可以看下面的讲解。在一个div#box里面放置一个浮动的div#float（例如：里面的内容是2行文字）和一个没有任何 CSS样式的div#content（例如：里面的内容是1行文字），然后在它们的下面放置一个div#clear（例如：里面的内容是1行文字）。演示html代码：

运行代码无着色模式复制打印?

1. <style type="text/css">  
2.     #box {background: #eee;}   
3.     #float {float : left;}   
4.     #clear {clear: both;}   
5. </style>  
6.     
7. <div id="box">  
8.     <div id="float">左边漂浮的任意内容<br />这是为了比右边的内容高一点</div>  
9.     <div id="content">任意输入的内容</div>  
10.     <div id="clear">下面清除的标签</div>     
11. </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的定位类型都设置为“相对”。