Question

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

在小视图中，在一列顶部有两列，在其他视图中在一行中有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黑客/技巧来使IE的行为模仿Chrome的行为？我宁愿不使用javascript来解决这个问题。

Answer 1

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

.back{min-height: 56px;}

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

1 个答案: