Menu
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.
271
Use inner div's with position relative and absolute, to fix cell height, making it overflow correctly. --> <div style="position:relative; height: 100%"> <div style="overflow-y: scroll; position: absolute; top: 0; right:0; bottom: 0; left: 0;"> it works in chrome. Please give me a solution for F*****g IE8 above
And thus, you also can’t absolutely position elements within the context of those elements either. I can help you out with that issue. The answer is just to make a generic wrapper element inside the table cells (the exact same size of the table cell) and use that as the relative positioning context.
If you want to have a content cell scroll correctly vertically, when the content of a cell exceeds the height of the table, like cell 2 in the following screen dump: Then you can use a “relative” positioned div inside the table-cell and in the relative positioned div a absolute positioned div.
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!
199
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
