IE6 IE7 IE8 (q) negative margin (margin) causes element overflow when the haslayout container is displayed abnormal

Standard Reference

According to the description in section 8.3 of W3C css2.1 specification, the margin attribute sets the width of the margin area of a box. The 'margin 'abbreviation attribute sets the margins of all four sides, while other margin attributes ('margin-top', 'margin-right ', 'margin-bottom' and 'margin-left') only set the margins on the side they represent.

The value of the margin attribute can be one of the following nominal values:

• <Length>Specify a fixed width.
• <Percentage>The percentage is calculated based on the width of the included block in the generated box.
• AutoFor details, see the calculation of width and margin.

The margin attribute can have negative values, but there may be restrictions related to the implementation.

Problem description

IE6 IE7 IE8 (q) negative margin (margin) causes element overflow when the haslayout container displays an exception.

Impact

In severe cases, the overall layout is damaged.

Affected browsers

IE6 IE7 IE8 (q)

Problem Analysis

The following test cases are used to illustrate this problem.

Analyze the following code:

<div style="width:100px; height:100px; border:1px solid red;">    <div style="border:1px solid blue; margin:-5px;">123</div></div>

A x pixel red border Div element contains a div element without a blue border Set width and height, and the child element is set with-5px 'margin 'in four directions '. This code is shown in different browser environments as follows:

IE6 IE7 (q) IE8 (q)	IE7 (s)	IE8 (s) Firefox opera safari chrome

In actual situations, when a block-level element is set with a negative 'marggin ', if the parent container 'overflow' of this element is 'visable' (the default value of 'overflow' is 'visable '), this block-level element may make its parent container unable to fully accommodate itself due to the 'marggin' negative value. It will partially "overflow" the parent container and be rendered out of the parent container. For more information about the box model, see the W3C css2.1 standard: box model.

However, according to the test code above,

• In IE6 IE7 (q) IE8 (Q), the child element div is larger than its parent container due to the 'margin 'of the negative value, and is hidden by the parent element, the 'margin-bottom 'is displayed because it does not exceed the parent container.
• In IE7 (s), 'margin-right' and 'margin-Right' are the same as those in IE6. The parts beyond the parent container are hidden by the parent container. While 'margin-bottom 'does not exceed the parent container because of its negative value, the browser removes the inner of the child element Div by 5px. The 'margin-left' is not hidden by the parent container because of negative values, but is displayed.
• In IE8 (s) Firefox Chrome safari Opera, the browser interprets the code according to W3C specifications, which is our expected result.

In the above test code, the container triggers its haslayout attribute because of setting the width and height. Let's see if the haslayout of the container is false, IE processes the child elements of the overflow container by the negative 'marggin:

<div style="border:1px solid red;">    <div style="border:1px solid blue; margin:-5px;">123</div></div>

The elements in the above Code do not trigger the haslayout attribute in IE. This Code performs as follows in different browser environments:

IE6 (q)	IE6 (s)	IE7 (q) IE8 (q)	IE7 (s)	IE8 (s)

After the haslayout attribute is not triggered by the container, the effect becomes more odd and the rule cannot be found.

Solution

To ensure that the element container triggers haslayout, set both 'position: relative 'and 'zoom: 1' for the element '.

First, ensure that the haslayout attribute is triggered by the container in IE, which can be implemented through ZOOM: 1.

In IE7 (s), when the haslayout attribute of an element with a negative value of 'margin' is set to 'true', that is, after the haslayout feature of this element is triggered, this bug disappears, for example, set the width or height for the element, or use ZOOM: 1 to trigger haslayout without affecting the element box model.

In IE6 IE7 (q) IE8 (Q), triggering the haslayout feature alone does not necessarily eliminate this bug. You also need to set 'position: relative 'for this element ', that is, Zoom: 1 'position: relative 'is used without affecting the element box model '.

IE6 IE7 IE8 (q) negative margin (margin) causes element overflow when the haslayout container is displayed abnormal