<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>IE6 躲貓貓BUG</title>
<style>
*{
margin:0;
padding:0;
}
#box {
background:#eee;
_height:1%;
}
#float {
float:left;
}
#clear {
clear:both;
}
</style>
</head>
<body>
<div id="box">
<div id="float">左邊漂浮的任意內容<br />這是爲了比右邊的內容高一點</div>
<div id="content">非浮動的任意輸入的內容</div>
<div id="clear">下面清除的標籤</div>
</div>
</body>
</html>
Peekaboo就是躲貓貓，上面代碼在非IE6及其它標準瀏覽器瀏覽是沒有問題的，分別顯示出這3塊文字內容，但是在IE6下瀏覽時就只顯示出了div#float、div#clear裏面的內容，div#content就莫明奇妙的消失了。在哪裏？你把鼠標放在應該顯示的地方劃一劃，就出現了本該出現的內容。也就是在變化背景的時候它就會出現，你也可以在div#clear下面放置很長很長的內容，也就是使瀏覽器出現滾動條，你向下拖動滾動條再拖回來，它一樣也出現了，這樣就明白了它爲什麼叫Peekaboo。
修復躲貓貓 Peekaboo Bug幾種方法：
● 不要在父容器div#box裏面使用背景，或者保持div#clear和div#float在一起，不要隔開
● 給父容器div#box一個明確的“寬度”或“高度”，哪怕_height:1%;，或者如下
#box {
_height: 100%; /* 修復躲貓貓 */
}
● 把父容器div#box和浮動元素div#float的定位類型positon都設置爲“相對”rellative
