IE11 Table Cell Height Collapsing With Position: Absolute contents

Question

Have come across this problem when testing some older stuff in IE 11. Example here:

http://codepen.io/Samih/pen/zaqjA

Basically, when you have a display: table-cell element which has contents positioned absolutely, it works fine until you modify the content of that absolute container. You can see this by clicking one of the table cells in the example.

In Chrome, Firefox and even IE 10 this does not cause a problem, but in IE 11 you can see that the table cell height disappears to 0 and does not come back until you do something like resize the window.

I have tried a hack solution that involved using javascript to alter the cell size and then change it back, but it proved unreliable in the place I applied it. I'd much prefer a CSS based solution if anyone can come up with one.

Answer 1

I found an answer myself. Applying display: inline-block to the position: relative element fixes the problem in IE 11. I've no idea why, mind - but it works!