In all the following test cases a blue box with some margins is inside a pink one. Depending on hasLayout on the inner (blue) and outer (pink) boxes, IE7-/Win shows several anomalies. After each test the IE result are briefly described.
An attempt to summarize the various problems (which are mostly wrong margin collapsing, but not only.) Please note that this is far from being definitive, due to the multiplicity of possible combinations:
hasLayout on outer / inner \ border on outer |
N / N | Y / N | Y / Y | N / Y |
---|---|---|---|---|
no border | Lorem OK |
Lorem No collapsing |
No collapsing |
OK |
top border | Lorem OK |
Lorem No bottom collapsing |
No bottom collapsing |
Missing top and horizontal margins |
top border & comment | Lorem OK |
Lorem No bottom collapsing |
No bottom collapsing |
OK |
bottom border | Lorem OK |
Lorem No top collapsing |
No top collapsing |
Bottom collapsing |
bottom border & empty element | Lorem OK |
Lorem No top collapsing |
No top collapsing |
OK |
border | Lorem OK |
Lorem OK |
OK |
Missing top and horizontal margins, Bottom collapsing |
border & comment | Lorem OK |
Lorem OK |
OK |
Bottom collapsing |
border & comment & empty element | Lorem OK |
Lorem OK |
OK |
OK |
hasLayout on outer / inner \ padding on outer |
N / N | Y / N | Y / Y | N / Y |
---|---|---|---|---|
top padding (< margin) | Lorem OK |
Lorem Top padding and margin collapsing, No bottom collapsing |
Top padding and margin collapsing, No bottom collapsing |
Missing top and horizontal margins |
top padding (< margin) & comment | Lorem OK |
Lorem Top padding and margin collapsing, No bottom collapsing |
Top padding and margin collapsing, No bottom collapsing |
OK |
top padding (> margin) | Lorem OK |
Lorem Top padding and margin collapsing, No bottom collapsing |
Top padding and margin collapsing, No bottom collapsing |
Missing top and horizontal margins |
top padding (> margin) & comment | Lorem OK |
Lorem Top padding and margin collapsing, No bottom collapsing |
Top padding and margin collapsing, No bottom collapsing |
OK |
bottom padding (< margin) | Lorem OK |
Lorem No top collapsing |
No top collapsing |
Bottom collapsing |
bottom padding (< margin) & empty element | Lorem OK |
Lorem No top collapsing |
No top collapsing |
OK |
bottom padding (> margin) | Lorem OK |
Lorem No top collapsing |
No top collapsing |
Bottom collapsing |
padding (< margin) | Lorem OK |
Lorem Top padding and margin collapsing |
Top padding and margin collapsing |
Missing top and horizontal margins, Bottom collapsing |
padding (< margin) & comment | Lorem OK |
Lorem Top padding and margin collapsing |
Top padding and margin collapsing |
Bottom collapsing |
padding (> margin) | Lorem OK |
Lorem Top padding and margin collapsing |
Top padding and margin collapsing |
Missing top and horizontal margins, Bottom collapsing |
padding (> margin) & comment | Lorem OK |
Lorem Top padding and margin collapsing |
Top padding and margin collapsing |
Bottom collapsing |