IE11 上表格单元格内绝对位置的奇怪行为

Question

我必须修复这个布局，它是弹性框、表格布局和绝对定位的混乱组合。

虽然它在Chrome，FF和Safari上工作正常，但IE11上的输出屏幕很奇怪。

在我的代码中，我希望span位于每个方块的右下角，但在 IE11 上，它出现在右上角。

任何人都可以帮我解决这个问题吗？此处的约束是必须维护弹性框.container和表系统。我只想修复span元素。提前感谢！

.container {
display: flex;
width: 400px;
}
.inner {
width: 50%;
}
.table {
display: table;
width: 100%;
border: 1px solid;
}
.table:before {
content: '';
display: table-cell;
width: 0;
padding-bottom: 100%;
}
.cell {
display: table-cell;
vertical-align: bottom;
position: relative;
padding: 20px;
}
.cell span {
position: absolute;
bottom: 20px;
right: 20px;
}

<div class="container">
<div class="inner">
<div class="table">
<div class="cell">
Yeah?
<span>Yo!</span>
</div>
</div>
</div>
<div class="inner">
<div class="table">
<div class="cell">
Yeah?
<span>Yo!</span>
</div>
</div>
</div>
</div>

Answer 1

删除您的 .cell span 块并 使用以下代码代替。 我已经检查了它在每个浏览器中的工作。

.cell span {
float: right;
}

Answer 2

要在 IE11 中修复它，您可以做的一件事是将cell内容包装到块容器中，然后向其添加position: relative。现在您可以使用right: 0px调整位置- 请参阅下面的演示：

.container {
display: flex;
width: 400px;
}
.inner {
width: 50%;
}
.table {
display: table;
width: 100%;
border: 1px solid;
}
.table:before {
content: '';
display: table-cell;
width: 0;
padding-bottom: 100%;
}
.cell {
display: table-cell;
vertical-align: bottom;
position: relative;
padding: 20px;
}
.cell span {
position: absolute;
/*bottom: 20px;
right: 20px;*/
right: 0px; /* ADDED */
}
.cell div { /* ADDED */
position: relative;
}

<div class="container">
<div class="inner">
<div class="table">
<div class="cell">
<div>Yeah?
<span>Yo!</span></div>
</div>
</div>
</div>
<div class="inner">
<div class="table">
<div class="cell">
<div>Yeah?
<span>Yo!</span></div>
</div>
</div>
</div>
</div>