Absolutely positioned pseudo element inside table

问题:

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?

回答1:

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.