Any relative and hasLayout box gets some extra bottom margin when the IE7 “Change Zoom Level” functionality is applied, unless it has a positioned ancestor. If the applied zoom is less than 100% the added margin is negative, causing overlap.
The amount of extra margin seems to be:
height of relative box × zoom_factor × (zoom_factor - 1)
In the above examples some relative boxes contain just a line of text. In common conditions, font-size 16px, line-height about 19px, applying a 150% zoom the extra margin is
19px × 1.5 × (1.5 - 1) = 14px
and applying a 200% zoom it is
19px × 2 × (2 - 1) = 38px
Position relative on body seems to fix the issue (all boxes will have a positioned ancestor).
Now the same test cases, but with (most of) the relative boxes having height:100px, to verify the size of the added margin. The extra margin is:
100px × 1.5 × (1.5 - 1) = 75px
100px × 2 × (2 - 1) = 200px
Other IE7 “Change Zoom Level” problems:
CSS tests home