爲什麼這不適用於IE 10？

此示例代碼在IE 10中無法正常工作（內部表格沒有獲取剩餘空間）。我脫掉.css和其他元素來突出我的問題。爲什麼這不適用於IE 10？

我想利用內表獲得50px頂部行和30px底部行之間的所有空間。在另一個文檔類型的工作，但我必須在我的項目中使用這個文檔類型。

<!DOCTYPE html> 

<html style="height: 100%"> 
<body style="height: 100%"> 
    <table style="height: 100%"> 
     <tr style="height: 50px"> 
      <td> 
       &nbsp; 
      </td> 
     </tr> 
    <tr> 
      <td> 
       <table style="height: 100%; background: #f00"> 
        <tr> 
         <td> 
          &nbsp; 
         </td> 
        </tr> 
       </table> 
      </td> 
     </tr> 
    <tr style="height: 30px"> 
      <td> 
       &nbsp; 
      </td> 
     </tr> 
    </table> 
</body> 
</html>

來源

2012-12-24 Max B.

爲什麼你有'身高：100％;'在身體和HTML？ Internet Explorer也是所有Web開發人員生活的禍根。 –

Luke身高和html的高度使得外表達到100％的高度。如果沒有這個外表不能達到正確的高度。 –

表格用於表格數據。如果您使用表格進行佈局，則可能會出現不同類型的呈現問題。 – JimmyRare

實際上，這在IE9中也不起作用。這不是一個錯誤，它是IE的渲染引擎的預期行爲。你的內表沒有被拉伸，因爲它忽略了height:100%。這是因爲DOM元素必須在某些單元中具有指定的height CSS屬性的直接父級（height: auto不計算在內）。如果您指定TD（內部TABLE的父級）的高度，那麼它將起作用。但是您不能爲TD指定height: 100%-50px-30px，所以此標記對您想要實現的佈局不利。

您的佈局是一個具有固定高度的頁眉和頁腳以及自動拉伸身體的clasic header-body-footer。這是網絡中非常流行的佈局。有很多方法可以使它跨瀏覽器工作（IE，Chrome，Firefox，Safari）。我最喜歡的選項，使其工作跨browserly（包括IE7）：

使用三個DIV的，頁眉和頁腳指定高度明確，而對於身體做出position:absolute; top:<header-height>; bottom:<foooter-height>。所有三個DIV都需要用一個絕對定位的容器包裝。

來源

2012-12-25 08:34:35 SergeyS

爲什麼這不適用於IE 10？

回答

相關問題