IE7 problems with “Change Zoom Level” functionality and inline elements

Below there are some inline elements (spans) with padding, background color and a right border. When the zoom ie7 zoom icon functionality of IE7 is applied to this page, the structure is not correctly zoomed: the text is wrongly positioned with respect to the boxes (it seems that the padding is forgotten when the text is rendered.) The same problem occurs if margin is used instead of padding.

FirstSecondThird

If hasLayout is applied to the inline elements then the problem is fixed (see below), but this modifies the boxes behavior in a way that could be undesired (see IE/Win: inline-block and hasLayout)

FirstSecondThird


In the following test case an inline image is the middle of some text (a dotted semi-transparent green gif.) When applying the IE7 zoom, the text is reflown as if the image was not there, so the image overlaps part of the text that should follow it (this does not occur if the image is at the end of a line.)

this text comes before the inline image, before, before, before test inline image after, after, after, this text comes after the inline image

The problem is fixed if letter-spacing (or word-spacing) is applied to the containing box. Any value different from normal can be used, including 0. However even when using the value 0, this causes some (bad) effect on the spacing of the text.

this text comes before the inline image, before, before, before test inline image after, after, after, this text comes after the inline image

position: relative applied to the containing box has some effect on the problem, but does not fix it completely:

this text comes before the inline image, before, before, before test inline image after, after, after, this text comes after the inline image

The same problem occurs with other inline and hasLayout elements (as are images), for example some form elements:

this text comes before a checkbox, before, before, before after, after, after, this text comes after a checkbox


In the middle of some paragraph text there are spans with background and some horizontal padding. As soon as IE7 zoom is applied the text inside the spans is repositioned ignoring the padding, while the spans backgrounds and borders still take it into account:

text before a span text after the span, before another span after the second span

As above, with letter-spacing:0 on the containing paragraph:

text before a span text after the span, before another span after the second span


In the middle of text there are some simple links with underline. When the IE7 zoom is applied sometimes some underline is wrongly repeated before the link texts. Moreover the clickable/hoverable area does not seem to cover exactly the link text (move slowly the mouse over the links to check this).

text a link some other text, some other text, some other text, some other text a second link some other text, some other text, some other text a third link some other text, some text a fourth link some text.

As above, with letter-spacing:0 on the containing paragraph:

text a link some other text, some other text, some other text, some other text a second link some other text, some other text, some other text a third link some other text, some text a fourth link some text.


Other IE7 “Change Zoom Level” problems:

Occasionally (even in this same page) other rendering problems show up when the IE7 zoom is applied.

CSS tests home