Internet Explorer 8 IFrame Height Nesting Bug
While testing our components and demos in the latest Internet Explorer 8 release (RC1), I found that a particular combination of nesting percentage based elements, caused an IFrame that we use to size to the default height, rather than filling the parent element.
The problem seems to only manifest when a div tag that uses both absolute based width (ex: 170px), and percentage based height (ex: 100%), is nested inside a table with absolute width and height.
Here’s the xhtml that breaks it (the tag in bold is causing the height problem):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>IE 8 IFrame Height Nesting Bug Demo</title>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" style="width:170px; height:494px;">
<tr><td style="width:170px; height:494px;">
<div id="container_div" style="width:170px; height:100%;">
<table cellspacing="0" cellpadding="0" border="0" style="width:100%; height:100%;">
<tr><td style="width:100%; height:100%; background-color:Green;">
<iframe frameborder="1" marginwidth="0" marginheight="0" style="width:100%; height:100%;" src="spacer.gif"></iframe>
</td>
</tr>
</table>
</div>
</td></tr>
</table>
</body>
</html>
To work around the problem in this case, I was able to simply set the width to 100%:
<div id="container_div2" style="width:100%; height:100%;">
<table cellspacing="0" cellpadding="0" border="0" style="width:100%; height:100%;">
<tr><td style="width:100%; height:100%; background-color:Green;">
<iframe frameborder="1" marginwidth="0" marginheight="0" style="width:100%; height:100%;" src="resources/mask.png"></iframe>
</td>
</tr>
</table>
</div>
Here is a side by side comparison of the two snippets: IE 8 IFrame Height Nesting Bug Demo
In case you don’t have IE8 installed, here is a screenshot:
