Deviation problem of IE6 positioning box model_html/css_WEB-ITnose

Article source: I Love Maomao Technology Blog
Address: http://www.52maomao.info

I dare not draw any conclusions easily about whether the IE6 box model is different from other browsers , but there seems to be some evidence to prove that the box model of IE6 is different from other browsers.

For example, we are going to talk about the deviation problem of the IE6 positioning box model today.

Position:absolute; and position:relative; in CSS properties are two properties that are often used for positioning layout. When we use position:relative; in the parent element to set it as a positioning tree, we use position:absolute; to position the child element, and set the position of the child element through top, left, right, and bottom.

There is the following situation: we use position:relative; for the parent element and add a padding:20px;, and then we position the child element through position:absolute;.

At this time, there is a problem in IE6. It is not positioned with reference to the edge area of ​​the parent element, but with reference to the edge after parsing the padding attribute of the parent element. Other standard browsers such as Firefox, Chrome, etc. are positioned with reference to the edge of the parent element. .

In the introduction of CSS attributes, position:absolute; is positioned with reference to the edge area of ​​the box with positioning attributes at the previous level. In other words, the parsing of IE6 here is an error, or a BUG. .

The code is as follows:

(All elements such as !DOCTYPE declaration are omitted here)

Like you

If you test it with a browser, you can easily find that the parsing of the "Like You" box in IE6 deviates from the left border of the parent box by 20px.

Test address: http://www.52maomao.info/wp-content/themes/gbray/demo/ie6_bug_position.html

The way to solve this BUG is very simple, which is to use IE6-specific Selector (_) to redefine the left of the subbox.

The code is as follows: _left:-20px;

From the above example, we can more or less see that the box model of IE6 is still different from other browsers.

When testing this BUG, ​​I found a problem, that is: if the HTML language we use is HTML4.01 and no DTD is declared, then in all IE browsers, the "Like You" The boxes will all have a 20px deviation.



This problem will not occur if DTD is declared:



If the language we use is XHTML1.0, then regardless of whether we declare a DTD, the parsing in IE6 and above will be correct.

Original address: http://www.52maomao.info/ie6-positioning-box-model-of-deviation.html

Reply to the discussion ( Solution)

Why doesn’t anyone leave me a comment?

The deviation problem of the IE6 positioning box model is not limited to this one place
You only mentioned one of them

What else is there? ? Please give me some advice!

I know there is another difference is that when a

contains a

when inside When the layer width is greater than the width of the outer layer, the outer layer will be expanded in IE. Other browsers will cut off the overflowing part. You can add a background to the inner and outer layers to see the effect

There is also the largest one The difference is that in ie6, in non-standard mode, width=margin border padding widthIn