Below three test cases with some text in a box with 1em padding, 1em border and 1em specified font-size. The font is monospaced, just to better show the problem. The second box is wrapped in a div with font-size:1em. The third box is wrapped in two nested divs with font-size:1em. These wrappers should not have any effect on the resulting value for 1em in the inner box.

In IE, when the browser 'text-size' (available on the menus) is not 'medium' the wrappers have an effect on the 1em value of the inner box.

a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z

The same three test cases as above are now wrapped in a div having font-size:100%. The IE anomalous behavior with text size resizing does not occur anymore: the three boxes are always equal. Moreover the amount of resizing with respect to 'medium' of any other choice is smaller compared to the first box above (in other words, smaller resizing factors are applied when moving amongst the various text sizes).

a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z

CSS tests home