Question

此示例代码在IE 10中无法正常工作（内部表不会获得剩余空间）。我摘下.css和其他元素来突出我的问题。

我想拿内表来获得顶部50px线和底部30px线之间的所有空间。在另一个doctype中它可以工作，但我必须在我的项目中使用这个doctype。

<!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>

Answer 1

实际上这在IE9中也不起作用。它不是一个bug，它是IE渲染引擎的预期行为。您的内部表未被拉伸，因为它忽略height:100%。这是因为DOM元素必须在某些单元中具有指定height CSS属性的直接父元素（height: auto不计算）。如果您在TD（内部TABLE的父级）上指定高度，那么它将起作用。但是您无法为height: 100%-50px-30px指定TD，因此此标记对您要实现的布局不利。

你的布局是一个具有固定高度的页眉和页脚，并自动拉伸身体的clasic header-body-footer。这是网络中非常流行的布局。有很多方法可以让它跨浏览器工作（IE，Chrome，Firefox，Safari）。我最喜欢的选项是让它跨浏览器工作（包括IE7）：

使用三个DIV，页眉和页脚明确指定高度，对于body make position:absolute; top:<header-height>; bottom:<foooter-height>。此外，所有三个DIV都需要包装在一个绝对定位的容器中。

为什么这不适用于IE 10？

1 个答案: