高度:100%在表格单元格内,无法在Firefox和IE上工作

我在尝试创建 div 具有 height:100% 包在里面 display:table-cell .

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

Here's the fiddle with the problem 。你可以注意到它可以正常工作,Chrome或Opera也可以。

代码出了什么问题?

有什么办法解决吗?

我想保留 display:table 和 显示:表格单元格 以使内容在可变高度容器上垂直居中。

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;
}