CSS 表格布局适用于 Chrome 而不是 IE9

Question

我有一个无法在IE中工作的布局工作示例。当我单击屁股时，我在底部div 的 50px 和 100px 之间切换大小。

我试图做一个小提琴，但无法让它工作。

<style type="text/css">
    .table
    {
        display: table;
        width: 100%;
        height: 100%;
    }
    .bottom
    {
        display: table-row;
        height: 100px;
        background-color: red;
    }
    .top
    {
        display: table-row;
        height: 100%;
        background-color: yellow;
        position: relative;
    }
    .header
    {
         height: 100px;
         background-color : gray;
    }
    .content
    {
        display: table-row;
        height: 100%;
        background-color: yellow;
        position: relative;
    }
    .footer
    {
        display: table-row;
        height: 100px;
        background-color: blue;
    }
</style>
<div style="position: absolute; top: 0; right: 0; bottom: 0; left: 0;">
<div class="table">
    <div class="top">
        <div class="table">
            <div class="header" >
                header
            </div>
             <div class="content">
                1.1
            </div>
            <div class="footer">
                1.2
            </div>
        </div>
    </div>
    <div class="bottom">
    <!-- Can change bottom height to 50px on click -->
        <button id="changeSize"></button>
    </div>
</div>
</div>

Answer 1

我已经让上面的代码在 jsfiddle 中工作：http://jsfiddle.net/c8nLb/1/

据我所知，它可以在IE（9）中工作。

我注意到带有类底部的元素并将其更改为 ID（getElementsByClassName IE 解析问题）

我还将高度从主要的CSS样式规则块移动到内联样式，因为我很难让它采用Javascript的高度样式。

希望它也对你有用！