Home > Developer > Web Develop
This is the IE6, IE7 bug.
Workaround:
The Overflow:hidden property of the parent element is invalidated when the parent element's immediate child or subordinate child element's style has the Position:relative property.
We found in IE 6 7 that the child element will exceed the height set by the parent element, even if the parent element is set to Overflow:hidden.
It is easy to fix this bug by using position:relative in the parent element.
Example
The code is as follows
Copy Code
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "UTF-8"><title>Document</title><styletype= "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> </Head><Body><Divclass= "Parent"> <Divclass= "Son"> <P>Aaaaaaaaaaaaaa</P> <P>Aaaaaaaaaaaaaa</P> <P>Aaaaaaaaaaaaaa</P> <P>Aaaaaaaaaaaaaa</P> <P>Aaaaaaaaaaaaaa</P> <P>Aaaaaaaaaaaaaa</P> <P>Aaaaaaaaaaaaaa</P> <P>Aaaaaaaaaaaaaa</P> </Div> </Div></Body></HTML>
The workaround is to set the absolute positioning of the child element, and the parent element to be positioned relative so that the overflow:hidden will not fail.
CSS Overflow:hidden in IE6, IE7 invalid cannot hide the workaround
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
