絕對頂部：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;}