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

Question

我必须修复此布局，它是flexbox，表布局和绝对定位的混乱组合。

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

在我的代码中，我希望span在每个正方形的右下角，但是在IE11上，它却显示在右上角。

谁能帮我解决这个问题？ 这里的约束是必须维护flexbox .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对于它的position: relative 。 现在，您可以right: 0px调整位置 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>