There are many more common ways to clear floating
. Clear{zoom:1;}. Clear:after{content: "";d Isplay:block;clear:both;}Add content at the end of a pseudo-class element ie6,7 incompatible can be resolved with zoom (zoom zoom will trigger the haslayout in IE to make the element calculate the width of the content based on its contents but Firefox does not support but can be resolved through the after pseudo class)
The two combine to solve the problem of incompatible browsers;
IE6 some compatibility issues with the LI tag:
The LI tag can be added by adding
Vertical-align:top: Solving the problem of 4px Gap under ie67 and the folding of the left and right two-column layout Ie67
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "UTF-8"> <title></title> <styletype= "Text/css">Body,ul{margin:0px;padding:0px;}Li{List-style:None;}a{text-decoration:None;}. Nav{width:496px;Height:177px;background:#f0f0f0;margin:30px Auto;position:relative;}. Clear{Zoom:1;}. Clear:after{content: "";Display:Block;Clear:both;}. Nav ul{Display:inline;position:Absolute; Left:40px;Top:60px;}. Nav Li{float: Left;vertical-align:Top;}. Nav Li a{Display:Block;Height:40px;Border:1px solid #f06000;padding:0px 15px;margin:0 0 0-1px;font-size:14px;Line-height:40px;position:relative;Z-index:0;float: Left; }. Nav Li A:hover{Border:1px solid #000000;Z-index:1; } </style> </Head> <Body> <Divclass= "Nav Clear"> <ulclass= "Clear"> <Li><ahref="#">Home</a></Li> <Li><ahref="#">You're welcome.</a></Li> <Li><ahref="#">Welcome everyone!</a></Li> <Li><ahref="#">Welcome everyone!!</a></Li> <Li><ahref="#">Navigation bar</a></Li> </ul> </Div> </Body></HTML>
Compatibility of floating elements and partial compatibility of Li tags under IE6
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
