My layout includes nested div elements displayed as a table and table-cell, with each cell containing an absolutely positioned :before element that covers the entire cell. While this setup works perfectly in most browsers, I am facing an issue 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>Is there anyone who knows how to resolve this compatibility issue?