html - 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 采用高度样式。

希望它也适合你！