Grid created in a <TD> element not always showing in IE9

Suite and Optimus Suite 5
#1

I am creating a Version 3.0 dhtmlxGrid in a

element that is within a element within a table: 
<table cellpadding="0" cellspacing="0">
  <tr>
    <td valign="top"><div id="grid" style="height: 100px;"></div></td>
  </tr>
</table>

This grid displays in Firefox and Chrome but not in IE9 (it does display in IE9 compatibility mode). If I call grid.seNoHeader(true), you only see a thin line for the grid, otherwise just the header. I have other instances where IE9 successfully displays grids within

elements so I haven’t quite figured out what the pattern is. For example, the following works: 
<table cellpadding="0" cellspacing="0">
  <tr>
    <td nowrap="nowrap"><button type="button" class="btn">Clear</button></td>
  </tr>
  <tr>
    <td><div id="grid" style="height: 100px;"></div></td>
  </tr>
</table>

Why having a row preceding the grid makes a difference is beyond me. Any suggestions?

The complete HTML for experimenters:

<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="css/dhtmlxgrid.css"/>
    <link rel="stylesheet" type="text/css" href="css/dhtmlxgrid_dhx_blue.css"/>
    <style type="text/css">
      .even {background-color: white;}
      .uneven {background-color:#eaf5ff;}
    </style>
    <script type="text/javascript" src="scripts/dhtmlxcommon.js"></script>
    <script type="text/javascript" src="scripts/dhtmlxgrid.js"></script>
    <script type="text/javascript" src="scripts/dhtmlxgridcell.js"></script>

    <script type="text/javascript">
//<![CDATA[

function initGrid()
{
    var grid = new dhtmlXGridObject("grid");
    grid.setImagePath("images/grid/");
    grid.setHeader("Key,Label");
    grid.setNoHeader(true);
    grid.setInitWidths("30,250");
    grid.setColAlign("right,left");
    grid.setColTypes("ro,ro");
    grid.setColSorting("int,str");
    grid.enableAutoWidth(true, undefined, 280);
    grid.init();
    grid.setSkin("dhx_blue");
    grid.enableAlterCss("even", "uneven");
    grid.enableMultiselect(false);
    grid.parse(
      [
        ["1", "String 1"],
        ["2", "String 2"],
        ["3", "String 3"],
        ["4", "String 4"],
        ["5", "String 5"],
        ["6", "String 6"],
        ["7", "String 7"],
        ["8", "String 8"],
        ["9", "String 9"]
      ], "jsarray"
    );
}
//]]>
    </script>
  </head>
  <body onload="initGrid()">
    <table cellpadding="0" cellspacing="0">
      <tr>
        <td valign="top"><div id="grid" style="height: 100px;"></div></td>
      </tr>
    </table>
  </body>
</html>
#2