powerbuoy powerbuoy - 7 months ago 15
HTML Question

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

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

The way I ended up solving it was to simply give the :before element a ridiculous min-height (in my case 2000px but depends on your use case) along with overflow: hidden on the table-cell.

Comments