html - 表格单元格内绝对定位的伪元素不覆盖 IE9/10 中的父元素

Question

我有一个嵌套的 div 设置显示为表格和表格单元格，其中每个单元格都有一个绝对定位的 :before 元素覆盖整个单元格。除了在 IE9、10 和 11 中，前元素仅覆盖单元格的 content 部分外，这在任何地方都可以正常工作。

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>

有人知道这是否可以修复吗？

Answer 1

我最终解决它的方法是简单地给 :before 元素一个荒谬的 min-height (在我的例子中是 2000px，但取决于你的用例)在表格单元格上使用 overflow: hidden。