IE7 problem with zoom and position:relative

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:

• At zoom 150% 100px × 1.5 × (1.5 - 1) = 75px
• At zoom 200% 100px × 2 × (2 - 1) = 200px

Other IE7 “Change Zoom Level” problems:

• IE7 problems with Zoom and inline elements
• IE7 problem with Zoom and background image on body

CSS tests home