在表格单元格中绝对定位的伪元素不包括IE9 / 10中的父元素 [英] Absolutely positioned pseudo element inside table cell does not cover parent in IE9/10

问题描述

我有一个嵌套的div设置显示为table和table-cell，其中每个单元格都有一个绝对定位的：覆盖整个单元格的元素。除了IE9,10和11之外，其他地方都可以正常工作，其中before元素只覆盖单元格的 content 部分。

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?

推荐答案

我最终解决问题的方法是简单地给出：之前元素一个荒谬的 min-height （在我的情况下是2000px，但取决于你的用例）以及 overflow：hidden 在表格单元格上。

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.

这篇关于在表格单元格中绝对定位的伪元素不包括IE9 / 10中的父元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！