IE6中页面滚动或最大化内容消失bug
该Bug影响版本 IE6
症状
一些内容在页面滚动或浏览器窗口最大化最小化的时候消失或重现
说明
常见CSS初学者用clearer元素去清除一个元素的浮动。在IE，包含浮动元素的元素必须拥有“layout”。如果没有，你将会遇到一个内容消失的bug (aka Peek-a-boo bug)或是“Leaking Background Bug”。哪个bug你会遇到取决于当页面被渲染的时候，清除元素是否接触到浮动元素，或是内部有一些内容的容器在一个清除元素的后面或是里面。另外，你可以设置height:0；在浮动元素上，将会让它拥有“layout”导致内容消失bug产生。无论在哪种情况下，如果容器没有“layout”，将会出现这个bug。
Demo 由于bug的特性，demo在独立的页面演示。下面演示产生bug的典型代码。
HTML Code:
| 代码如下 | |
| <div id="container"> <p id="bugger"> Enough text to make this element longer than the height of the #container </p> <p id="disappearing">This text will be disappearing</p> <div class="clearer"></div> <p id="helper">I am more important than the text!</p> </div> |
|
CSS Code:
| 代码如下 | |
|
#container { background: #abc; } |
|
上面的代码有所有触发bug的要素。当代码在IE6渲染时，当窗口滚动或是窗口变化，#disappearing里面的文字会消失或重现。 如果#container没有设置任何背景，内容消失bug不会被触发。#helper是额外增加的一个元素。它可以是普通的文字，也可以是空格，也可以包含在清除元素里面。没有它#container的背景会被泄露，有了它#disappearing将会出现闪动。
解决方案
这个问题产生于你没有用正确的方法清楚浮动元素。清除元素不是在必要的情况下，不要使用它们。相反，使用其他方法，在IE中包含浮动的元素需要拥有“layout”。 即使你使用清除元素去清除浮动，IE还是需要在容器上设置“layout”。下面是把解决方法应用于原来的demo： 由于bug的特性，demo在独立页面演示。
HTML Code:
| 代码如下 | |
|
<div id="container"> |
|
CSS Code:
| 代码如下 | |
|
#container { background: #abc; } <!--[if IE]> |
|
HTML和CSS代码和原来的demo相同，即使你知道不应该使用清除元素。我们用条件注析让#content拥有布局，在IE是一个正确的清除浮动的方法，是防止内容消失bug出现所必须的。阅读hasLayout tutorial 你将会找到更好的方法。
