Internet Explorer 6 bug

The peek-a-boo bug in IE6 is named because the text seems to have disappeared under certain conditions and appears only when the page is re-loaded. The condition for this bug is: a floating element is followed by some non-floating elements, and then a cleaning element, all these elements are included in your element that sets the background color or image. If the floating element is cleared to the floating element, the non-floating element in the middle seems to disappear, and the background color or image of the parent element is hidden. It only appears again when the page is refreshed.

Fortunately, there are many ways to solve this bug. The easiest way is to remove the background color or image from the parent element. However, this is often not feasible. Another method is to avoid contact between the cleaning element and the floating element. If a specific size is applied to the window elements, the bug does not seem to suffer. If the row height is specified for the window, this bug will not appear. Finally, setting the position attribute of floating elements and container elements to relative also relieves this problem.

Try the following solutions:

A. add height: 1% to the parent element.
B. Add a width.
C. Add a background color.