Overflow in CSS: The solution cannot be hidden if hidden is invalid in ie6 or ie7.

This is the bug of ie6 and ie7.

Solution:

When the style of the parent or child element has the position: relative attribute, the overflow: hidden attribute of the parent element becomes invalid.
In IE 6 7, we found that the child element will exceed the height set by the parent element, even if the parent element is configured with overflow: hidden.

It is easy to solve this bug. You can use position: relative; in the parent element to solve this bug.

Example

The code is as follows:

Copy code

<Style type = "text/css"> . Parent {width: 100px; height: 100px; position: absolute; border: 1px solid # f00 ;} . Son {width: 100px; height: 100px; left: 0; top: 0; overflow: hidden; position: relative ;} P {margin: 0; padding: 0 ;} </Style> <Div class = "parent"> <Div class = "son"> <P> aaaaaaaaaaaa </p> <P> aaaaaaaaaaaa </p> <P> aaaaaaaaaaaa </p> <P> aaaaaaaaaaaa </p> <P> aaaaaaaaaaaa </p> <P> aaaaaaaaaaaa </p> <P> aaaaaaaaaaaa </p> <P> aaaaaaaaaaaa </p> </Div> </Div>

The solution is to set absolute positioning for the child element and relative positioning for the parent element, so that overflow: hidden will not be invalidated.