Strange behaviour of position absolute inside table-cell on IE11

Question

I have to fix this layout, which is a messy combination of flexbox, table layout and absolute positioning.

While it's working normal on Chrome, FF and Safari, the output screen on IE11 is strange.

In my code, I want the span to be at the bottom-right of each square, but on IE11, it appears on top-right instead.

Can anyone please help me to fix this problem? The constraint here is that the flexbox .container and the table system must be maintained. I want to fix only the span element. Thanks in advance!

 .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

remove your .cell span block and use below code instead of that. i have checked its working in every browser.

.cell span {
    float: right;
}

Answer 2

One thing you can do to fix it in IE11 is to wrap your cell contents into a block container and then add position: relative to it. Now you can adjust the position with right: 0px - see demo below:

 .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>