IE6 Peek-a-boo Bug

The setup:

一个流动的盒子，里面有一个浮动元素，旁边是内容 (content) 。一切都正常，直到用IE6查看。我的content哪去了？你重新加载页面，也没有。当你滚动页面，或选择其他窗口，在切换回出问题的地方，它又出来了！

注意：这个一直存在的BUG已经被IE7修复了(released in late 2006) ，所以 IE捉迷藏BUG (Peek-a-boo BUG) 最终被解决了。然而IE6一直存在这个BUG，我们还得修复它。

The demo:

div#floatholder (dotted border) 在水平方向上通过 margins 设置尺寸 (不设置margin，宽度为100%)，高度通过为内容高度。div#flaot (thick brown border) 向左浮动，同时包含一个 test link 。后面跟了几行纯文本、交替的包含文本的div，还有 test links 。接下来是一个 cleared div (purple border) ，然后是 another div for good measure。

To reset bug , reload page.

The bugs:

这种效果在不同的上下文环境下可能会出现不同情况。我本想试着在这里把它们列出来，但是页面会非常长，让人头疼。

Fun with links:

试着点击links。这会重新获得丢失的内容，就像滚动一样。如果浮动元素是一个 linked image ，一样处理。但仅仅是在 div#floatholder 中的 links ，并且 links是在 clear div之前，才能显示出丢失的内容。

试着点击content area的最后一个 link 。 

Special notes:

包含triggers的content div 行为很奇怪。CSS-D认为，这似乎是 clear div 引起的。但强制清除浮动时 (forced to clear a float) ，之前跟在浮动元素后面的内容有时会被覆盖，可能是被 div#floatholder 的 background 覆盖。

The fixes:

最终，这个BUG会被触发，甚至是 div#float 出现在 div#floatholder 时，这个外部浮动元素会触及 div#floatholder 之内的 clearing div 。

有三种方式可以防止这个BUG:

1.浮动元素后不使用 clearing div ，或者避免 div#floatholder 使用 background 。不完全理想。

2.给 div#floatholder 和 div#float 同时设置 "position:relative" 。一定要充分测试此方法。

3.给 div#floatholder 设置 hasLayout (目前为止最完美的方法)。 

我们建议使用条件注释来为IE6及以下版本提供 hasLayout fix 。

原文地址：

http://positioniseverything.net/explorer/peekaboo.html#