IE11 Table Cell Height Collapsing With Position: Absolute contents

css, html, internet-explorer, javascript

Solution

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!

Problem

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.

Original source