Actual results in Internet Explorer 5.x, Internet Explorer 6, Internet
Explorer 7 and Internet Explorer 8 beta 2:
the "deeply-nested-child-block" green text will grow to a huge size or
will shrink to an unreadable tiny size in comparison to
"parent-block".
Expected results:
the "deeply-nested-child-block" green text should be using the same font
size as the "first-nested-child-block" or the same font size as
"parent-block".
The size of text should be multiplied by a factor of 1 at each nested level (therefore should remain constant) but not in Internet Explorer 5.x, 6, 7 and 8b2. In Internet Explorer 6, Internet Explorer 7 and Internet Explorer 8 beta 2, the text size of deeper levels is increased (or decreased) exponentially to the nested level of the block. So, nested levels grow to become very huge or shrink to become very tiny contributing to breaking webpage layout (causing a problem to web authors sensitive to accessibility issues) or frustrating the user seeking an accessibility assistance for reading the webpage according to his viewing/eyesight needs.
Some relevant testimonials describing accurately the effects of the bug:
"IE gets its text resizing
horribly wrong when just using ems. (...) bump the text size up or down,
and you'll notice that IE
scales ems far more drastically than percentages, resulting in too big / too
small text."
from Patrick H. Lauke, May 18th 2004, Weblog comments: How to size text
using ems
"text sized in ems can be resized across all browsers. However
IE6 and IE7 unacceptably exaggerate the smallness and
largeness of the resized text"
from Richard Rutter, November 20th 2007, How to Size Text
in CSS
"However, (gasp) IE has a
problem with ems. Resizing text from medium (default) to large in
IE5/6 would lead to
a huge increase in font size rather than the gradual one
expected"
from Jon Tan, September 27th 2007,
The Incredible Em & Elastic Layouts with CSS
"If for instance you set the root element (either <body> or
<html>) to font-size:1em, then just setting View > Text Size to
'smaller' can cause the text to become unreadably small."
from css-discuss.incutio.com, 2007, UsingEms, A word of
caution concerning Internet Explorer
"When I tried font-size:1em, my IE6 browser 'text size' will toggle from very
tiny to very huge.
....Not acceptable for accessibility!"
from Krystof, August 29th 2005, Weblog comments: How to size
text using ems
"Simply put, IE for Windows' relative font size inheritance cascade
is broken. (...) If you find it necessary to size
through cascade, you'll find % works more reliably than
ems."
from InternetExplorerWinBugs, IE Font
Sizing Bugs: Inheritance at css-discuss.incutio.com
Only 2 people explained and documented this bug in detail (with screenshots, examples, demos):
Firefox 2.x, Opera 9.x, Safari 3.0.3, Konqueror 3.5.x, Seamonkey 1.x, Seamonkey 2.0a1pre, K-meleon 1.x, Galeon 2, Epiphany 2, NS 6.1, NS 6.2, NS 7.0, NS 7.2, Hv3 TKHTML alpha 16, Amaya 9.55 all pass this test.
Credit must go to Bug avec les unités relatives em et Internet Explorer by Florent Verschelde and must go to em font-resizing bug in IE5 - IE7 by Gunlaug & Georg
This bug has been reported at connect's IE beta feedback as bug 339085.
Update:
This bug has been FIXED in Internet Explorer 8 Partner
pre-RC1 build 6001.18343 released on December 11th 2008. Otherwise,
Internet Explorer 8 Partner pre-RC1 build 6001.18343 PASSES this specific
and particular testcase.