IE7 Inherited Font Sizes using ems Bug

Looks like an ordinary layout, a page with a wrap div and a content div. Due to the html hierarchy the fontsize stated in the body, wrap and content should become smaller. As ecah child element will inherit any style of it's parent (or grandparent) element right up the html hierarchy to the body. The style of the body will pass down to the child, then grandchild, etc. The content text will inherit it's fontsize from the following selectors in the CSS:

The (X)HTML is here:

<h1>h1 heading</h1>
<h2>h2 heading</h2>
<p>Paragraph - Inherits Font size 0.9em from body selector</p>
<div class="wrap">
	<h2 class="area">Wrap Div</h2>
	<h1>h1 heading</h1>
	<h2>h2 heading</h2>
	<p>Paragraph - Inherits font size 0.9em from the body selector and font size 0.9em from the wrap class selector</p>
	<div class="content">
		<h2 class="area">Content Div</h2>
		<h1>h1 heading</h1>
		<h2>h2 heading</h2>
		<p>Paragraph - Inherits font size 0.9em from the body selector, font size 0.9em from the wrap class selector and font size 0.9em from the content class selector</p>
	</div>
</div>

The CSS is here:

body {
	font-family: verdana, Geneva, Arial, Helvetica, sans-serif;
	background-color: #bda;
	font-size: 0.9em;
	margin: 0;
}
.wrap {
	background-color: #ceb;
	font-size: 0.9em;
	border:1px solid #000;
	height: 20em;
	margin: 20px 40px;
	padding: 20px;

}
.content {
	background-color: #dfc;
	font-size: 0.9em;
	border:1px dashed #000;
	height: 10em;
	margin: 20px 40px;
	padding: 20px;
}
h1 {
	font-size:1.65em
}
h2 {
	font-size:1.50em
}

All look sweet at this stage. Please open this page in Firefox for the first demonstration:

In this demo I have broken basic elements down. The first part shows the style from the body selector. I have a box which is the page wrap with a solid border, I have another box for the content. I have replicated certain elements in the different areas demonstrating how each element will look depending on where it was situated.

In the body selector I have font-size 0.9em which would show the h1, h2, or p at 90% of their default font-sizes in a particular browser. By the time we get to the h1, h2, or p in the content box. They will be 90% of the font-size that is in the wrap box and 90% of the of the font-size that is in the body selector. Doing my mathematics. The h1, h2, or p in the content box will be 72.9% of their default font-sizes in a particular browser. The h1, h2, or p in the wrap box area will be 81% of their default font-sizes in a particular browser.

Now resize the text in FF and you will see them scaling quite as expected. This is FF for you, a standard compliant browser.

Now open the demo in IE7 and resize the text. Something has gone awfully wrong. The smallest text setting in IE almost make the paragraph disappear. The largest text setting in IE does an even stranger thing. Now the text in the content area is the largest in the content box and becoming smaller each step to the body. This is a thing to be conscious of when setting fontsizes.

What has happen to my content div

For layout purposes you would never want someone to upsize the text in IE7. The content div flyout out of the wrap div very quickly. Both the wrap div and the content div have been given heights in ems. What should happen as happens in FF is that each box should grow along with the text. But with IE7 the text grow to big for the content box, the content box has also grown and flyouts of the wrap div. That means that the content box is not 10em in height. The content div on the smallest text size also starts to flyout of the wrap div. So the relative sizing of the page has been destoryed by IE7's handling of resizing the text of inherited relative fontsizes. Eventually the text will grow out of the content div in FF after upsizing 4 times but the content div is still the same relative height and is relative to the height of the wrap box and text.