Home > Developer > Web Develop
A few days ago to do the project encountered such a problem, under IE6 and IE7, to the parent element set Overflow:hidden does not work can not be hidden, and later found that there is a child element in the settings position:relative, if the child element delete position: Relative, then the overflow:hidden of the parent element can be hidden, the specific code and effect are as follows:
HTML code:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"/> <Metahttp-equiv= "X-ua-compatible"content= "Ie=edge,chrome=1"/> <Metaname= "Renderer"content= "WebKit"/> <Metaname= "keywords"content=""/> <Metaname= "description"content=""/> <title>Document</title> <style> *{margin:0;padding:0;}. W{width:480px;margin:50px Auto;}. W ul{width:100%;Overflow:Hidden;Height:144px;Border:1px solid #f00;}. W Li{position:relative;Height:36px;width:108px;Border:1px solid #d1d1d1;Line-height:36px;text-align:Center;float: Left;Display:inline;margin:0 10px 10px 0;} </style></Head><Body> <Divclass= "W"> <ul> <Li>111111111</Li> <Li>222222222</Li> <Li>333333333</Li> <Li>444444444</Li> <Li>555555555</Li> <Li>666666666</Li> <Li>777777777</Li> <Li>888888888</Li> <Li>999999999</Li> <Li>000000000</Li> <Li>111111111</Li> <Li>222222222</Li> <Li>333333333</Li> <Li>444444444</Li> <Li>555555555</Li> <Li>666666666</Li> <Li>777777777</Li> <Li>888888888</Li> <Li>999999999</Li> <Li>000000000</Li> </ul> </Div></Body></HTML>
IE6 and IE7 effects:
Workaround:
Sets the position:relative for the parent element.
Problems with position and overflow under "CSS" IE6 and IE7
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
