Question

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

＆＃13;

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 */
}

＆＃13;

<div class="wrap">
  <div>
    <h2>
      Content number 1
    </h2>
  </div>
  <div>
    <h2>
      Content number 2
    </h2>
    <p>
      With more content
    </p>
  </div>
</div>

＆＃13;

有人知道这是否可以解决？

Answer 1

我最终解决问题的方法是简单地将:before元素设置为一个荒谬的min-height（在我的情况下为2000px，但取决于您的用例）以及表中的overflow: hidden -cell。

在表格单元格中绝对定位的伪元素不包括IE9 / 10中的父元素

1 个答案: