絶対位置の高さ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エッジが赤いボックスが表示されます（親の親は固定1を持っているにもかかわらず）
• IE 11は青色のボックスを表示します（完全にm絶対配置された要素を発行する）

Answer 1

このバグは永遠にたくさんの人を悩ませています。インターネットエクスプローラは、以下のようにそれの内部（今inner-childクラスを使用して）絶対配置要素を使用する前に、細胞内で（今childクラスを使用して）中間要素を必要とする：

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

次のように中間要素がスタイルされるべきです。

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

ここでは、IE11上で動作するソリューションのフィドルですが、以前のバージョンでも動作します。絶対位置での子要素に-100％：

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

Answer 2

は、親要素と下に隠されたオーバーフローを適用します。

私の場合、それは：擬似要素でした。

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; 
    } 
    }