IE8/firefox45.9でdivコンテナのiframeが期待どおりに動作しない

できるだけポータブルなページナビゲーションを作成しようとしています。私はChrome 58を使用していますが、ページは期待どおりに表示されます。iframeはtdコンテナに従ってサイズ変更されますが、IEでは動作していません。また、Firefoxはセルの中央にiframeを表示します。ここに私のコードです。IE8/firefox45.9でdivコンテナのiframeが期待どおりに動作しない

<!DOCTYPE html> 
<html lang="es"> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
     <meta name="language" content="ES"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <link href="css.css" type="text/css" rel="stylesheet"> 
     <script src="js.js" type="text/javascript" charset="UTF-8"></script> 
     <title>Mi sitio</title> 
    </head> 
    <body> 
     <table id="navUI"> 
      <tr> 
       <td id="navHeader" colspan="2">Tema general</td> 
      </tr> 
      <tr> 
       <td id="MenuHeader">Men&uacute;</td> 
       <td rowspan="4"><iframe src="intro.htm" id="navField"></iframe></td> 
      </tr> 
      <tr> 
       <td class="MenuItems" onclick="navPage('page1'); return false;">Item 1</td>  
      </tr> 
      <tr> 
       <td class="MenuItems" onclick="navPage('page2'); return false;">Item 2</td> 
      </tr> 
      <tr> 
       <td class="spander">&nbsp;</td> 
      </tr> 
     </table> 
    </body> 
</html>

CSS：

@charset "utf-8"; 

html, body, table { 
    padding:0; 
    margin:0; 
    height:100%; 
    width:100%; 
} 

body { 
    font:12px Verdana, Arial, Sans-serif; 
} 

table#navUI, td { 
    border:1px solid black; 
} 

td#navHeader { 
    text-align:center; 
    height:30px; 
} 

td#MenuHeader { 
    width:10%; 
    text-align:center; 
} 

td.MenuItems { 
    width:10%; 
} 

td.MenuItems:hover { 
    background-color:#BDBEE1; 
    cursor:pointer; 
} 

td.spander { 
    width:10%; 
    height:100%; 
} 

#navField { 
    border:none; 
    height:100%; 
    width:100%; 
}

アイデアはjqueryのない純粋なHTMLとCSSを維持することです。助けてくれてありがとう。

出典

2017-05-31 Joel