html - 绝对顶部 :0 bottom:0 not working inside table-cell in IE11

Question

根据我之前的一个问题，我有这个 fiddle

在小 View 中，它在一列之上有两列，在其他 View 中，它在一行中有 3 列。这按预期工作。但是，在设计方面，我希望内容 block 之间有空间。为了解决这个问题，我在单元格内制作了一个绝对定位的元素，该元素的大小会相应地填充空间，但会留下一个空隙。这在 Chrome 中运行良好，但是 IE11、桌面、Windows 8 应用程序和 Windows Phone 都无法按预期运行。

在 IE11 中， block 只会扩展以适应内容(即使绝对 block 不包含任何内容......)我认为这是因为 IE 正在考虑浏览器添加的自然单元格填充以使单元格同样的高度。更重要的是:如果你给 block 一个设定的高度，并使用 bottom:0， block 将粘在单元格的底部。

这是 fiddle 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;}