【IE6】IE6bug之躲猫猫bug（peekaboo）bug

IE6的躲猫猫bug（peek-a-boo）bug，之所以起这个名称是因为在某些条件下文本看起来消失了，只有在重新装载页面时才再度出现。
出现这个bug的条件是：一个浮动元素后而跟着一些非浮动元素，然后是一个清理元素，所有这些元素都包含在一个设置了背景颜色或图像的你元素中。如果清理元素扩展了浮动元素，那么中间的非浮动元素看起来消失了，隐到了父元素的背景颜色或图像后面，只有在刷新页面时才重新出现。

IE6的躲猫猫示意图如下：

　　幸运的是，有许多方法可以解决这个bug。

最容易的方法可能是去掉父元素上的背景颜色或图像。

但是，这常常是不可行的。另一个方法是避免清理元素与浮动元素接触。如果窗口元素应用了特定的尺寸，那么这个bug似乎就不会出殃了。如果给窗口指定行高，这个bug也不会出现。最后，将浮动元素和容器元素的 position属性设置为relative也会减轻这个问题

如何找到猫猫？

其实方法还蛮多的，如果仔细看网页源代码中关于CSS部分的注释，其实就已经可以找到一些答案。这里列出一些方案，供大家参考。

只要采用下面方法的任意一种即可消灭bug

1.指定最外面div容器（#holder）和浮动元素的'position: relative'

    2.去掉最外面div容器（#holder）的背景颜色（或者背景图片）
    3.给予最外面div容器（#holder）的 hasLayout
      3-1.明确的指定最外面div容器（#holder）的宽度（相对宽度和绝对宽带都可以）。
    3-2.缩小浮动div容器（#floater）的高度到一定程度
    3.不浮动div容器（#floater）
    4.不使用<div class="clear"><div>技术
上面的方法只是理论上的，请根据实际需要采用不同的方法。另：这个bug在FireFox、safari、opera等浏览器下不会出现。因此本篇就没有截图。

测试代码：

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6 <style type="text/css">
 7 .wrap{/*background:#0046a3*/;position:relative;}
 8 .photo{float:left;/*50px;height:50px;*/;color:red;}
 9 .clear{clear:both;}
10 </style>
11 </head>
12 
13 <body>
14 <div class="wrap">
15     <div class="photo">this is a pic</div>
16     <div class="content">woshiaaaaaaaaaa</div>
17     <div class="clear"></div>
18 </div>
19 </body>
20 </html>

但是，这个BUG以前切图的时候出现过，刚刚用ietester测试，IE6下没有重现

参考文档：

http://blog.sina.com.cn/s/blog_61352f210100f5fy.html

《精通CSS高级web标准解决方案》第二版 9.5.4