Ie6 position: a solution to location dislocation

The bug that ie6 absolutely locates and its solution. Position: absolute: the location of left and bottom in ie6 is incorrect.

In ie6, many bugs can be solved by triggering layout. The above solution is to trigger layout, whether set zoom: 1 or width and height. The following css tutorial attributes or values allow an element to get layout:
Position: absolute absolutely locates the contained block of an element, which often causes problems in this aspect.
Float: left | right due to the features of the layout element, the floating model has many strange performances.
Display: inline-block it is often used when an inline-level element requires layout, which may also be the only effect of this css attribute-so that an element has layout
Width: any value except auto
Height: any value except auto
Zoom: any value except auto

 

The code is as follows:

Copy code

<! -Bottom location error in ie6-> <Hr/> <Div style = "position: relative; border: 1px solid orange; text-align: center;"> <A href = "http://www.111cn.net"> http://www.111cn.net/</a> <Div style = "position: absolute; bottom: 0; left: 0; background: # ccc;"> </div> </Div> In ie6, the bottom location error occurs: the solution is similar to the left location: Method 1 is to set zoom to trigger layout for the parent layer. Method 2 sets the height for the parent layer ). <! -Solution 1 zoom: 1-> <Hr/> <Div style = "position: relative; border: 1px solid orange; zoom: 1; text-align: center;"> <A href = "http://www.111cn.net"> http://www.111cn.net/</a> <br/> <A href = "http://www.111cn.net"> http://www.111cn.net/</a> <Div style = "position: absolute; bottom: 0; left: 0; background: # ccc;"> </div> </Div> <! -Solution 2: Set height> <Hr/> <Div style = "position: relative; height: 60px; border: 1px solid orange; text-align: center;"> <A href = "http://www.111cn.net"> http://www.111cn.net/</a> <Div style = "position: absolute; bottom: 0; left: 0; background: # ccc;"> </div> </Div> Trbl attributes

(Top, right, bottom, left) is valid only when the position attribute is set.
When position: absolute is set
If the position attribute is not set for the parent level (unlimited), the current absolute uses the trbl attribute to locate the original point in the upper left corner of the browser.
If the position attribute is set for the parent level (unlimited), the current absolute is located based on the trbl attribute in the upper left corner of the parent level (nearest) as the original vertex.

When position: relative is set
Then, the original vertex is located based on the trbl attribute in the upper left corner of the parent (recent) content area (or offset relative to the last element of the located element in the parent content area ), if there is no parent level, the original vertex is in the upper left corner of the body. Relative positioning cannot be stacked. When relative positioning is used, elements still occupy the original space regardless of whether the elements are moved or not. Therefore, moving an element overwrites other boxes.

In general, when the webpage is centered, absolute is prone to errors, because the webpage always adapts automatically with the resolution, while absolute uses the browser's upper left corner as the original point, the location will not change due to resolution changes. Sometimes you also need to use z-index to set the upper and lower relations of the container. The larger the value is, the higher the Upper it is. The value range is a natural number. Of course, it should be noted that the parent-child relationship cannot be set with z-index. The parent-child relationship must be set at the parent level.