使用Internet Explorer在表格单元格中绝对定位

Question

我有一个表格结构，我需要嵌套元素来获取表格单元格div的所有大小。所以我把它定为绝对值并将其所有位置定义为 0，它在 FireFox 和 Chrome 上效果很好，但在 IE 上效果不佳:(

这是标记：

<div class="table">
    <div class="cell">
      <figure class="illustration">My illustration</figure>
    </div>
</div>

CSS ：

.table {
    display: table;
    width: 400px;
}
.cell {
  position: relative;
    display: table-cell;
    height: 600px;
    background-color: grey;
}
.illustration {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: red;
    color: #fff;
}

这是我的笔：http://codepen.io/balix/pen/qEMwzj

如果你看到红色背景，没关系;)

IE的任何黑客？

Answer 1

我遇到了同样的问题。如果有人仍在寻找解决方法，您需要在 .cell 内创建一个容器

.cell > div{
    height:100%;
    width:100%;
    position:relative;
}

Answer 2

这不是位置问题，你的身材只是身高为零。我只是将height: 300px插入illustration类中，现在它在IE上运行良好：

.illustration {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: red;
    color: #fff;
    height: 300px;
}

http://codepen.io/anon/pen/QwVRoE

在真实的代码中，您肯定会在figure标签中有一些图像，因此应该没有问题。