为什么这不适用于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？

回答

相关问题