Question

不知何故IE 11在height:100%的另一个元素中缺少我的绝对定位元素。如果我给它一个固定的高度似乎只能工作。（即使父母的父母有一个固定的父母）

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

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

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

中间元素的样式应如下：

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

以下是IE11上工作解决方案的小提琴 - 但也适用于以前的版本。

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

Answer 2

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

就我而言，它是一个：伪元素。

IE上的问题 - ＆gt; Click to see

修复后 - ＆gt; 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上运行

2 个答案: