绝对顶部:0底部:0在IE11中的表格单元格内不起作用

Question

建立我以前的问题,我有这个小提琴

它在小视图中的一列顶部有两列,在其他视图中一行有3列.这按预期工作.但是,对于设计方面,我想要内容块之间的空间.为了解决这个问题,我在单元格内部制作了一个绝对定位的元素,其大小相应地填充空间,但留下间隙.这在Chrome中表现非常出色,但IE11,桌面,Windows 8应用程序和Windows手机都无法按预期工作.

在IE11中,块只会扩展以适应内容(即使绝对块不包含任何内容......)我认为这是因为IE考虑了浏览器添加的自然单元格填充以使单元格具有相同的高度.踢球者是:如果你给了一个设定的高度,并使用bottom:0该块将直接粘在单元格的底部.

这是小提琴HTML:

<div class="table">
    <div class="cell"><div class="back"></div>One Line</div>
    <div class="cell"><div class="back"></div>Two<br/>Lines</div>
    <div class="cell"><div class="back"></div>More<br/>Than two<br/>Lines</div>
</div>

和CSS:

.table {
    display: table;
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
}
.cell {
    display: table-cell;
    border: 1px solid red;
    position:relative;
    padding:0px 10px;
}
.back {
    position:absolute;
    top:0;
    bottom:0;
    left:10px;
    right:10px;
    background:#777;
    z-index:-10;
}
.cell:first-child .back {
    right:5px;
}
.cell:nth-child(2) .back {
    left:5px;
}
@media (max-width: 768px) {
    .cell:last-child {
        display: table-caption;
        caption-side: bottom;
    }
}

@media (min-width:769px){
    .cell:last-child .back {
        left:5px;
    }
    .cell:nth-child(2) .back {
        right:5px;
    }
}

我可以用什么css hacks/tricks来使IE的行为模仿Chrome的行为？我宁愿不使用JavaScript来解决这个问题.

Answer 1

你可以尝试用这种方式使用

.back{min-height: 56px;}