绝对位置高度 100% 在 IE 11 上不起作用 - 但它在 Microsoft Edge 上起作用

Question

IE 11 以某种方式缺少我在另一个元素中使用 height:100% 的绝对定位元素。它似乎只有在我给它一个固定的高度时才有效。（即使 parent 的 parent 有一个固定的）

HTML

  <div class="parent-table">
    <div class="parent-cell">
      <div class="child">
      </div>
    </div>
  </div>

CSS

html,
body {
  height: 100%
}
.parent-table {
  display: table;
  table-layout: fixed;
  position: relative;
  height: 400px;
  width: 100%;
}

.parent-cell {
  height: 300px;
  background: blue;
  position: relative;
  width: 100%;
  display: table-cell;
}

.child {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  background: red;
  width: 100%
}

Reproduction Online JSFiddle

IE Edge 将显示一个红色框（按预期工作）
IE 11 将显示一个蓝色框（完全缺少绝对定位元素）

Answer 1

这个错误一直困扰着很多人。 Internet Explorer 在使用绝对定位元素（现在使用 inner-child class）之前，需要在单元格内有一个中间元素（现在使用 child class），如下所示：

<div class="child">
  <div class="inner-child">
  </div>
</div>

中间元素的样式应如下所示：

.child {
  display:inline-block;
  width:100%;
  height:100%;
  position:relative;
}

这是 fiddle 在 IE11 上的工作解决方案 - 但也适用于以前的版本。

https://jsfiddle.net/efvLdmtt/7/

Answer 2

将溢出隐藏应用到父元素和底部：-100% 到位置绝对的子元素。

在我的例子中它是一个 :pseudo 元素。

IE 上的问题 --> Click to see

修复后 --> Click to see

.contact-box-parent {
   display: table-cell;
   overflow: hidden;
     &:before {
       content: '';
       background: @white;
       position: absolute;
       top: 0;
       bottom: -100%; 
       left: 15px;
       right: 15px;
       z-index: 0;
     }
  }

绝对位置高度 100% 在 IE 11 上不起作用 - 但它在 Microsoft Edge 上起作用

Absolute position height 100% won't work on IE 11 - But it does on Microsoft Edge

css

internet-explorer

internet-explorer-11