Currently under review and testing 12th May 2008. IE8 passes test 2a, 2b & 2d.
These tests demonstrate the effects of hasLayout on default margins for block level elements. They confirm similar tests done by Bruno Fassino, IE/Win: Margin collapsing and hasLayout using just divs. The test in this test series uses the div as a control for testing the default margins of block level elements.
The most common bug with hasLayout and default margins is when a container element has hasLayout=true. This causes the vertical margins of descendant elements that sit against the containers' edge to disappear.
Each example consists of:
Further test cases with hasLayout and margins are linked to at the bottom of the page.
With example 1a, 1b, 1c & 1d, IE shows somewhat correct behavior. The vertical margins of these descendant block elements, stick out beyond their containers, thus pushing the container down from the grey div by 19 pixels and pushing the bottom grey div away from the container by 19 pixels.
1a. paragraph
With all example IE shows wrong behavior. The container has hasLayout and this causes the paragraphs' top and bottom margin and the headings' and unordered lists' top margin to disappear. The divs' vertical margins and headings' and unordered lists' bottom margin do not collapse into the adjoining vertical margins of the container and stick out beyond the container, but are contained by the containers' content edge. This should only happen if the container has padding or a border.
2a. paragraph
With example 1a & 1b, IE shows wrong behavior. The vertical margins set to 'auto' of these descendant elements, stick out beyond their container, thus pushing the container down from the grey div by 20 pixels and pushing the bottom grey div away from the container by 20 pixels.
With example 1c & 1d, IE shows correct behavior. The vertical margins of 'auto' resolve to '0'.
3a. paragraph
With example 2a & 2b, IE shows wrong behavior. The container has hasLayout and this causes the paragraphs' and headings' vertical margins of 'auto' not to resolve to '0' and are contained by the containers' content/padding edge.
With example 2c & 2d, IE shows correct behavior. The vertical margins of 'auto' resolve to '0'.
4a. paragraph
The above demonstrations shows only the most simple form of this bug but future test cases will explore this bug in different situations involving containers with padding.
Created: 7th of May, 2008. Updated: 8th of May 2008