Absolutely positioned pseudo element inside table cell does not cover parent in IE9/10

Question

I have a nested div setup displayed as table and table-cell, where each cell has an absolutely positioned :before element that covers the entire cell. This works fine everywhere except in IE9, 10 and 11 where the before element only covers the content part of the cell.

 div.wrap { display: table; } div.wrap > div { background: green; display: table-cell; position: relative; } div.wrap > div:before { background: red; display: block; content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; } div.wrap > div > * { position: relative; /* render on top of overlay */ } 

 <div class="wrap"> <div> <h2> Content number 1 </h2> </div> <div> <h2> Content number 2 </h2> <p> With more content </p> </div> </div> 

Anyone know if this can be fixed?

Answer 1

我最终解决的方法是简单地给:before元素一个可笑的min-height （在我的情况下为2000px，但取决于您的用例）以及overflow: hidden在表格单元中。