In a row of two-column layouts, when only one block has a floating property, there is a 3px gap between the two columns (normal for other browsers) under the IE6 browser. As shown in the following:
High Version Browser:
I in E6:
The code is as follows:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <Metahttp-equiv= "Content-type"content= "Text/html;charset=utf-8" /> <title></title> <styletype= "Text/css">. Left{width:200px;Height:100px;float: Left;Background-color:#f70;}. Right{Background-color:#fff;Height:100px;Border:1px solid Red;} </style></Head><Body><Div> <Divclass= "Left">Left</Div> <Divclass= "Right">Right</Div></Div></Body></HTML>
Solution:
1. Set float for elements that are not set floating. Not recommended because this method causes the width of the element to be the content width, not the adaptive layout;
2. Add margin-right:-3px to the element that has the float set;
3. Add IE6 hack method, set _position:relative;_left:-3px to the non-floating element;.
IE6 compatibility issues 2--3 pixel spacing
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
