IE6中页面滚动或最大化内容消失bug

作者：袖梨 2022-06-25

该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:

代码如下	复制代码
Enough text to make this element longer than the height of the #container This text will be disappearing I am more important than the text!

CSS Code:

代码如下	复制代码
#container { background: #abc; } #bugger { float: left; width: 40%; } .clearer { clear: both; }

上面的代码有所有触发bug的要素。当代码在IE6渲染时，当窗口滚动或是窗口变化，#disappearing里面的文字会消失或重现。如果#container没有设置任何背景，内容消失bug不会被触发。#helper是额外增加的一个元素。它可以是普通的文字，也可以是空格，也可以包含在清除元素里面。没有它#container的背景会被泄露，有了它#disappearing将会出现闪动。

解决方案

这个问题产生于你没有用正确的方法清楚浮动元素。清除元素不是在必要的情况下，不要使用它们。相反，使用其他方法，在IE中包含浮动的元素需要拥有“layout”。即使你使用清除元素去清除浮动，IE还是需要在容器上设置“layout”。下面是把解决方法应用于原来的demo：由于bug的特性，demo在独立页面演示。

HTML Code:

代码如下

复制代码

        Enough text to make this
        element longer than the
        height of the #container

This text will be disappearing

I am more important than the text!

CSS Code:

代码如下

复制代码

#container { background: #abc; }
    #bugger {
        float: left;
        width: 40%;
    }
.clearer { clear: both; }条件注析

HTML和CSS代码和原来的demo相同，即使你知道不应该使用清除元素。我们用条件注析让#content拥有布局，在IE是一个正确的清除浮动的方法，是防止内容消失bug出现所必须的。阅读hasLayout tutorial 你将会找到更好的方法。