admin管理员组

文章数量:1317909

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

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 e 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 e up with one.

Have e 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 e 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 e up with one.

Share Improve this question edited Feb 27, 2014 at 15:54 Samih asked Feb 27, 2014 at 14:10 SamihSamih 1,0989 silver badges16 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 8

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!

本文标签: javascriptIE11 Table Cell Height Collapsing With Position Absolute contentsStack Overflow