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

Question

基于我以前的问题，我有这个fiddle

它在小视图中在一列顶部有两列，在其他视图中连续 3 列。这按预期工作。然而，对于设计方面，我想要内容块之间的空间。为了解决这个问题，我在单元格内制作了一个绝对定位的元素，该元素将相应地调整大小以填充空间，但留下一个间隙。这在 Chrome 中效果很好，但是 IE11、桌面、Windows 8 应用程序和 Windows Phone 都无法按预期工作。

在 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/trick 来使 IE 的行为模仿 Chrome 的行为？我宁愿不用javascript来解决这个问题。

Answer 1

你可以试试这样使用

.back{min-height: 56px;}