高度：100％内的表格单元格无法在Firefox和IE上运行

Question

我在尝试使用div在height:100%的包裹内创建display:table-cell时遇到了一些麻烦。

我注意到它在Firefox和IE 9中不起作用。

Here's the fiddle with the problem。您可以注意到它按预期工作，Chrome或Opera。

代码出了什么问题？

有什么办法可以解决吗？

我希望保留父项的display:table和display:table-cell，以便将内容垂直居中于变量高度容器。

HTML

<div class="table">
    <div class="table-cell">
        <div class="content"></div>
    </div>
</div>

CSS

body, html {
    margin:0;
    padding:0;
    height:100%;
}
.table {
    display:table;
    width:100%;
    height:100%;
}
.table-cell {
    display:table-cell;
    vertical-align: middle;
    width:100%;
}
.content {
    height: 100%;
    display: block;
    overflow: hidden;
    position: relative;
    background: url(http://spaceinimages.esa.int/var/esa/storage/images/esa_multimedia/images/2012/11/solar_eclipse_corona/12092636-3-eng-GB/Solar_eclipse_corona_node_full_image.jpg);
    background-size:cover;
}

Answer 1

要使height:100%生效，所有父容器必须为height:100%。如果您发现，.table-cell样式没有height:100%。

添加此样式可修复Firefox中的问题：

.table-cell {
    display:table-cell;
    vertical-align: middle;
    width:100%;
    height:100%;
}

作为替代方案，将图片添加到HTML而不是CSS background-image也可能有效。

body, html {
    margin:0;
    padding:0;
    height:100%;
}
.table {
    display:table;
    width:100%;
    height:100%;
}
.table-cell {
    display:table-cell;
    vertical-align: middle;
    width:100%;
}
.content {
    height: 100%;
    display: block;
    overflow: hidden;
    position: relative;
    background-size:cover;
}

.content img {
    width:100%;
    height:100%;
}

<div class="table">
    <div class="table-cell">
        <div class="content">
            <img src="http://spaceinimages.esa.int/var/esa/storage/images/esa_multimedia/images/2012/11/solar_eclipse_corona/12092636-3-eng-GB/Solar_eclipse_corona_node_full_image.jpg"/>
        </div>
    </div>
</div>

HTML

<div class="content">
    <img src="...your image url..." />
</div>

CSS

.table-cell {
    display:table-cell;
    vertical-align: middle;
    width:100%;
}

.content img {
    width:100%;
    height:100%;
}

Answer 2

您必须将.content和.table .table-cell类设置如下

.content {
    display: table;
    height: 100%;
}

.table, .table-cell {
    height: 100%;
}