IE7-/Win: Margin collapsing and hasLayout

According to CSS2.1 8.3.1 vertical margins between certain boxes may collapse. This happens when the margins are “adjoining”. Some cases are:

In IE7-/Win this type of margin collapsing (between a box and its first/last child) is badly affected by the hasLayout property of the intervening boxes. In all the following test cases there is an external red box, with no margins, containing a blue one with 20px margins. Some boxes have been given hasLayout (the ones with slightly darker background.) Test cases are separated by grey spacer divs without margins, to avoid further interferences, and to clearly show when a margin of the internal box sticks out of the external container.

space
1a. NO hasLayout container with no padding and no border. The inner box' margins stick out of the container. Correct. (NO hasLayout on internal box, not relevant.)
space
1b. NO hasLayout container with no padding and no border. The inner box' margins stick out of the container. Correct. (hasLayout on internal box, not relevant.)
space
2. NO hasLayout container with padding and border (one of the two is sufficient), NO hasLayout internal box. No collapsing. Correct.
space
3a. hasLayout container with no padding and no border. No collapsing. Wrong! (NO hasLayout on internal box, not relevant.)
space
3b. hasLayout container with no padding and no border. No collapsing. Wrong! (hasLayout on internal box, not relevant.)
space
4. NO hasLayout container with padding and border (one of the two is sufficient), hasLayout internal box. The margin-top of the inner box is lost. Wrong! The margin-bottom of the inner box sticks out of the container. Wrong! Problems with the horizontal spacing as well.
space
5. hasLayout container with padding: No internal margins stick out of it (correct.) But the padding-top seems to collapse with the margin-top of the internal box. Wrong! (NO hasLayout on internal box, not relevant.)
space

It doesn't seem possible to draw concise conclusions (and the above cases do not exhaust all combinations.)

  1. Margins collapsing between a box and a child is fully correct only when both the involved boxes do not have hasLayout.
  2. When the external box has hasLayout, the margins of its children are always confined inside it (no collapsing, which is wrong in absence of padding/border.) Moreover there is a collapsing between top padding of the external box and top margin of the child (wrong, padding and margin should never collapse.)
  3. When the external box has padding/border but no hasLayout and the child has hasLayout there are further wrong behaviors: bottom margin collapsing (which should not occur in this case), and loss of some margins.

See IE7-/Win: hasLayout and margins of nested boxes for some more cases and comments.

CSS tests home