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>