These tests show a common contruct when the first element in a container is a float which is followed in the source by a static block element with a top margin. What should happen is margins should collapse. These tests demonstrate that this doesn't not always happen in Internet Explorer. This bug is not present in IE8.
With example 1a IE7- shows correct behavior. The top margins of these descendant elements collapses and stick out beyond the 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.
1a. Paragraph (with default vertical margins)
With example 2a and 2b IE shows wrong behavior. The paragraphs' and divs' top margin does not collapse into the adjoining vertical margin of the container and stick out beyond the container, but are contained by the containers' content/padding edge due the presence of the float before it in the source. This should only happen if the container has padding or a border.
With example 2a and 2b Opera 9.24 shows wrong behavior. The paragraphs' and divs' top margin do collapse into the adjoining vertical margin of the container and stick out beyond the container, but the float top edge is situated at the margin edge of the container instead of it's content edge. This would only happen if there was no container enclosing the float and the paragraph or div for margin collapse to happen.
Passed: Gecko 1.7~1.9, Opera 9.50 and Safari 3 (beta)
Failed: Opera 9.24, IE5.5, IE6 & IE7
Below are some screenshots of how it should render (as in Firefox), and how it renders in Opera, IE7 and IE6.
Screenshot in Firefox
Screenshot in Opera
Screenshot in IE7
Screenshot in IE6
Similar to the above examples, example 3a and 3b IE shows wrong behavior. In the first example the paragraphs' top margin has disappeared due to the container having hasLayout.
3a. Paragraph (wrapper with hasLayout)
Example 4a and 4b IE shows correct behavior. The paragraphs' and divs' top margin does not collapse into the adjoining vertical margin of the container but are contained by the containers' content/padding edge. The same happens if the container has a border instead.
5a. Paragraph (wrapper with hasLayout)
The above example show one solution that renders the same in all modern browsers but the next example shows the best solution. Example 5a and 5b IE shows correct behavior. The paragraphs' and divs' top margin collapses into the adjoining vertical margin of the container. This is because the container itself also has top margin.
6a. Paragraph (wrapper with top margin)
But if the container has hasLayout then both examples 6a and 6b will show wrong behavior though example 6a with the paragraph does render similar to that of other browsers.
7a. Paragraph (wrapper with top margin and hasLayout)
Example 3b, 5a, 5b, 6a, 6b and 7b show the IE Margin Transference Bug. Please see IE hasLayout and Margins for more information about why the paragraphs' and divs' react differently in hasLayout containers. Microsoft documentation 2.2.23 [CSS-Level2-2009] of the bug.
Futher investigation with this bug.