IE6 page scrolling or maximizing content vanishing bug

This bug affects version IE6
Symptoms
Some content disappears or reappears when the page is scrolled or the browser window is maximized to minimize

Description
Common CSS beginners Use clearer elements to clear the float of an element. In IE, elements that contain floating elements must have "layout". If not, you will experience a bug that disappears (aka Peek-a-boo bug) or "leaking Background bug". Which bug you will encounter depends on whether or not the element is exposed to floating elements when the page is rendered, or if a container with some content inside it is behind or inside a purge element. In addition, you can set the height:0, on the floating element, will let it have "layout" causes the content to disappear the bug to produce. In either case, this bug will occur if the container does not have "layout".

Demo due to the characteristics of the bug, demo in a separate page demo. The following shows the typical code that produces a bug.

HTML Code:

code is as follows	copy code
<div "id=" Container "     <p id=" bugger "         enough Text to make this         element longer than the     & nbsp;   height of the #container     </p>     <p id= Disappearing ">this text would be disappearing</p>     <div class=" clearer "></div     <p id= "helper" >i am more important than the text!</p> </div>

CSS Code:

The code is as follows	Copy Code
#container {background: #abc;} #bugger { Float:left; width:40%; } . clearer {Clear:both}

The above code has all the elements that trigger the bug. #disappearing里面的文字会消失或重现 when the code is rendered in IE6, when the window scrolls or the window changes. If #container does not set any background, the content disappears bug will not be triggered. #helper是额外增加的一个元素. It can be plain text, or it can be a space, or it can be included in the purge element. Without it #container background will be leaked, with it #disappearing will appear flashing.

Solution

This problem arises when you do not use the correct method to clear floating elements. Clear elements do not use them, if necessary. Conversely, using other methods, including floating elements in IE, requires a "layout". Even if you use the Purge element to clear the float, ie still needs to set "layout" on the container. The following is the solution applied to the original demo: due to the characteristics of the bug, demo on a stand-alone page demo.

HTML Code:

code is as follows	copy code
<div id= "Container"     <p id= "bugger"         enough Text to make this         element longer than the     & nbsp;   height of the #container     </p>     <p id= Disappearing ">this text would be disappearing</p>     <div class=" clearer "></div     <p id= "helper" >i am more important than the text!</p> </div>

CSS Code:

The code is as follows	Copy Code
#container {background: #abc;} #bugger { Float:left; width:40%; } . clearer {Clear:both} Conditional injection Analysis <!--[If ie]> <style type= "Text/css" > #container {zoom:1;} </style> <! [endif]-->

The

HTML and CSS code are the same as the original demo, even if you know you should not use the purge element. We use conditional annotation to let #content have layout, in IE is a correct way to clear the float, is to prevent content from disappearing bugs appear necessary. Read Haslayout tutorial You will find a better way.