Position: absolute under IE6 to locate bugs and solutions

web front end seven thousand two hundred and eleven 13 years ago (2011-03-24)

stay IE6 There are positioning errors in left and bottom using position: absolute. Here are some common solutions:

<!-- Left positioning error under IE6 -->

<div style="position:relative;border:1px solid orange;text-align:center;">

<div style="position: absolute; top: 0; left: 0; background: # CCC;">Tuoyuan</div>

</div>

<!-- Left positioning error under IE6 -->

<hr />

<div style="position:relative;border:1px solid orange;text-align:right;">

<div style="position: absolute; top: 0; left: 0; background: # CCC;">Tuoyuan</div>

</div>

The above code locates an error in IE6. There are two solutions: 1. Set zoom: 1 to trigger layout for the parent layer. 2. Set the width for the parent layer.

<!-- Solution 1 zoom: 1 -->

<hr />

<div style="position:relative;border:1px solid orange;zoom:1;text-align:center;">

<div style="position: absolute; top: 0; left: 0; background: # CCC;">Tuoyuan</div>

</div>

<!-- Solution 2: Set width -->

<hr />

<div style="position:relative;width:99%;border:1px solid orange;text-align:center;">

<div style="position: absolute; top: 0; left: 0; background: # CCC;">Tuoyuan</div>

</div>

The following code is in IE6, and the bottom location is wrong:

<!-- Bottom positioning error under IE6 -->

<hr />

<div style="position:relative;border:1px solid orange;text-align:center;">

<div style="position: absolute; bottom: 0; left: 0; background: # CCC;">Tuoyuan</div>

</div>

The solution is similar to left positioning: method 1 is to set the zoom trigger layout for the parent layer, and method 2 is to set the height for the parent layer.

<!-- Solution 1 zoom: 1 -->

<hr />

<div style="position:relative;border:1px solid orange;zoom:1;text-align:center;">

<div style="position: absolute; bottom: 0; left: 0; background: # CCC;">Tuoyuan</div>

</div>

<!-- Solution 2: Set height -->

<hr />

<div style="position:relative;height:60px;border:1px solid orange;text-align:center;">

<div style="position: absolute; bottom: 0; left: 0; background: # CCC;">Tuoyuan</div>

</div>

Many bugs in IE6 can be solved by triggering layout. The above solutions, whether setting zoom: 1 or setting width and height, are actually designed to trigger layout. The following CSS properties or values will make an element get layout:

The containing block of the absolute positioning element will often have problems in this aspect

Due to the characteristics of the layout element, the floating model will have many strange performances

When an inline level element needs layout, it is often used. This may also be the only effect of this CSS attribute - let an element have layout