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

时间:2015-03-10 10:48:59

标签: internet-explorer absolute

我有一个表结构,我需要嵌套元素来获取表格单元格的所有大小。所以我把它设置为绝对并将其所有位置定义为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的任何黑客攻击?

2 个答案:

答案 0 :(得分:4)

我遇到了同样的问题。 如果有人仍在寻找解决方法,您需要在.cell中使用

创建一个容器
.cell > div{
    height:100%;
    width:100%;
    position:relative;
}

答案 1 :(得分:-3)

这不是位置问题,你的身材只有零高度。我只是将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代码中包含一些图片,因此应该没问题。