在div容器上的iframe無法按預期在IE8上工作/ firefox45.9

我試圖使頁面導航儘可能便攜。我使用的是Chrome 58並且頁面按預期顯示：iframe根據td容器調整大小，但不在IE和firefox中工作，它在單元格中間顯示iframe。這是我的代碼。在div容器上的iframe無法按預期在IE8上工作/ firefox45.9

<!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%; 
}

的想法是保持純HTML和CSS沒有jQuery的。謝謝您的幫助。

來源

2017-05-31 Joel