Notes on IE6/IE7 bugs concerning the ‘margin’ CSS property

Incorrect margin collapsing behavior – collapsing when prohibited

IE6 incorrectly allows margins of block-displayed first and last in-flow child elements of hasLayout elements to collapse into the parent’s margin. This can be fixed for such elements whose margin is unspecified by setting margin-top/margin-bottom:auto using an IE6-only filter, thanks to the “margin:auto” bug described below.

Incorrect margin collapsing behavior – not collapsing when required

When setting margin-top, margin-bottom to some value (including auto) in IE6 it causes all hasLayout elements to contain their first and last child block elements’ margins instead of collapsing them. This cannot be fixed.

Incorrect margin behaviour – explicit vertical margin:auto does not override browser’s internal stylesheet value

IE6 incorrectly takes margin-top/margin-bottom:auto to mean “use browser-stylesheet value” instead of “use 0”. This can be fixed by using the value 0 instead of auto.

Incorrect margin behaviour – unspecified vertical margins treated as 0

When not explicitly setting margin-top/margin-bottom:auto on block-displayed first and last in-flow children of hasLayout elements, IE6 treats these margins as 0 instead of using the browser’s internal stylesheet value. This can be fixed for those hasLayout elements whose display modes dictate that margins should not collapse (such as floats) by setting these margins to auto using an IE6-only filter, thanks to the “margin:auto” bug described above. However, it cannot be fixed for other hasLayout elements: setting explicit margin widths will fall foul of the “non-collapsing margins” bug described above.

Incorrect margin behaviour – top margin ignored in presence of absolutely positioned sibling

When explicitly setting margin-top on an in-flow hasLayout immediately-following sibling of an absolutely positioned element whose parent is hasLayout with a non-zero padding-top or border-top, IE6 ignores this margin (treats it as 0) unless the absolutely-positioned sibling is the last in a consecutive sequence of any number of arbitrarily ordered floated and AP siblings of which at least one is a float. Test cases.

Incorrect margin behaviour – bottom margin ignored if it touches the body’s bottom content area edge

When explicitly setting margin-bottom on an in-flow element, IE6 ignores this margin (treats it as 0) if it touches the body’s bottom content area edge.

Incorrect margin behaviour – margin ignored on hasLayout element if parent is not hasLayout

When explicitly setting the margin on an in-flow hasLayout element whose parent is not hasLayout, IE6 ignores this margin (treats it as 0).

Incorrect margin behaviour – top margin collapses with ancestor’s padding

The top margin (unspecified, auto or positive value) of block-displayed (non-AP? in-flow?) elements (or their descendents with whom their top margin collapses) behaves in IE6 and IE7 as it collapses with the top padding of any hasLayout ancestor whose top content edge they touch. This can be fixed by adding the padding value of the hasLayout element to the desired margin of the child and setting this total as the child’s margin using an IE-only filter.