絕對位置高度100％將無法在IE 11上工作 - 但它確實在Microsoft Edge上

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邊緣會顯示一個紅色的盒子（如預期工作）
• IE 11將顯示一個藍色框（完全m發出絕對的定位元素）

Answer 1

這個bug一直在困擾着很多人。因特網瀏覽器需要（現在使用child類）在細胞內的中間元件使用絕對定位的元素（現在使用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的問題 - > 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; 
    } 
    }