Article Introduction: there will be 3 pixel bugs between the two div under IE. |
Description: IE two div will appear between 3 pixel bug, this bug is when a div with a float element, and make a div is not used when it appears.
Workaround: A. Use float at the same time for another element; Add a statement for the not-floating div: margin-right:-3px; or margin-left:-3px; ;
#container {margin:0 auto; width:100%;}
#sidebar {float:left; width:200px; height:500px; background: #9c6;}
#sidebar2 {float:right; width:200px; height:500px; background: #9c6;}
#content {margin:0 205px; _margin:0 202px; height:500px; Background: #ffa;}
When a floating element is adjacent to a non floating element, the 3-pixel bug appears, and it offsets 3 pixels. As long as the haslayout of IE is triggered, the non floating element will have a layout. Therefore, using the IE6-specific hack rule, write the style for it alone can fix this problem: _zoom:1;margin-left:value;_margin-left:value-3px;zoom is one of the conditions that the IE triggers layout, Because it is the special CSS rules of IE, it uses zoom. MARGIN-LEFT:VALUE-3PX is a bug that fixes 3px in IE6. Before using floating elements to fix bugs, now we can try this new method! Note: The preceding underline is specifically addressed to IE7 for the following version of hack!