內容依然存在：IE瀏覽器的div覆蓋之前

Question

我很困惑這個覆蓋。在prod網站上：before元素覆蓋一個完整圖像bg的div。在Chrome和Firefox中查看網站時，內容會按照預期顯示在疊加層上方。但是，在IE11中查看內容時：before元素會覆蓋該父級div中的所有內容。

我想在IE瀏覽器中的結果是相同的。

Ex。覆蓋圖像，覆蓋圖上的文字/內容。

參見：JSFiddle

.foreverCTA:before { 
 
    content: ""; 
 
    width: 100%; 
 
    height: 900px; 
 
    background: #2f71a9; 
 
    background: -webkit-radial-gradient(circle, transparent -25%, #2f71a9 81%); 
 
    background: -o-radial-gradient(circle, transparent -25%, #2f71a9 81%); 
 
    background: -moz-radial-gradient(circle, transparent -25%, #2f71a9 81%); 
 
    background: radial-gradient(circle, transparent -25%, #2f71a9 81%); 
 
    position: absolute; 
 
    left: 0; 
 
} 
 

 
.foreverCTA { 
 
    color: #fff; 
 
    /*display: flex;*/ 
 
    background: #fff url("images/2015APR06_RAYSBASEBALL_MFPB6240s.jpg") no-repeat center; 
 
    background-size: cover; 
 
    height: 900px; 
 
    /*justify-content: center; 
 
    flex-wrap: wrap; 
 
    align-items: center;*/ 
 
} 
 

 
.foreverCTA p, 
 
.foreverCTA h2, 
 
.foreverCTA h4 { 
 
    color: #fff!important; 
 
} 
 

 
.foreverCTA li, 
 
.foreverCTA ul { 
 
    list-style: none; 
 
    padding: 0; 
 
} 
 

 
.foreverCTA p, 
 
.foreverCTA h3, 
 
.foreverCTA h2, 
 
.foreverCTA li { 
 
    -webkit-filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, .4)); 
 
    filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, .4)); 
 
} 
 

 
.ion-ios-baseball { 
 
    margin: 3px; 
 
    padding-top: 10px; 
 
    font-size: 2em; 
 
    vertical-align: center; 
 
} 
 

 
.foreverGame { 
 
    margin-top: 50px; 
 
} 
 

 
.foreverHeader { 
 
    padding-top: 50px; 
 
    /*-webkit-flex: 1 1 100%; 
 
    -moz-flex: 1 1 100%; 
 
    -ms-flex: 1 1 100%; 
 
    -o-flex: 1 1 100%; 
 
    flex: 1 1 100%; 
 
    z-index: 999;*/ 
 
} 
 

 
.waysToBuy { 
 
    margin: 50px 0; 
 
} 
 

 
.buyDetails { 
 
    min-height: 210px; 
 
    text-align: center; 
 
} 
 

 
.foreverHeader h1, 
 
.waysToBuy h1 { 
 
    font-size: 4.5em; 
 
    color: #ECDC00!important; 
 
    padding: 0!important; 
 
    margin: 0; 
 
    -webkit-filter: drop-shadow(2px 4px 0px rgba(249, 159, 28, 1)); 
 
    filter: drop-shadow(2px 4px 0px rgba(249, 159, 28, 1)); 
 
} 
 

 
.foreverHeader h3 { 
 
    font-size: 3.5em; 
 
    color: #fff!important; 
 
    margin: 5px; 
 
} 
 

 
.foreverBuy { 
 
    /*display: flex; 
 
    justify-content: center; 
 
    flex-wrap: wrap; 
 
    align-items: flex-start;*/ 
 
} 
 

 
.buy1, 
 
.buy2 { 
 
    height: 400px; 
 
    /*display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    flex-wrap: wrap; 
 
    align-items: flex-end; 
 
    flex-basis: 20%;*/ 
 
} 
 

 
.buyDetails { 
 
    /*align-self: flex-start;*/ 
 
} 
 

 
.buyButton { 
 
    /*flex-basis: 50%; 
 
    align-self: center;*/ 
 
    vertical-align: bottom; 
 
} 
 

 
.buy2 a { 
 
    color: #ECDC00!important; 
 
}

<div class="foreverCTA"> 
 
    <div class="row"> 
 
    <div class="foreverHeader"> 
 
     <h3>Lorem ipsum<br></h3> 
 
     <h1>Lorem ipsum<br></h1> 
 
     <h3>Lorem ipsum</h3> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="foreverGame"> 
 
     <h2>Lorem ipsum</h2> 
 
    </div> 
 

 
    <div class="foreverDate"> 
 
     <h3>Lorem ipsum</h3> 
 
    </div> 
 
    </div> 
 
    </div>

Answer 1

這將這樣的伎倆，

check this fiddle here

先刪除位置：絕對財產和添加以下屬性，

display:block; 
margin-bottom:-900px; 

所以你最終的CSS將作如下安排，

.foreverCTA:before { 
    content: ""; 
    width: 100%; 
    height: 900px; 
    background: #2f71a9; 
    background: -webkit-radial-gradient(circle, transparent -25%, #2f71a9 81%); 
    background: -o-radial-gradient(circle, transparent -25%, #2f71a9 81%); 
    background: -moz-radial-gradient(circle, transparent -25%, #2f71a9 81%); 
    background: radial-gradient(circle, transparent -25%, #2f71a9 81%); 
    left: 0; 
    display:block; 
    margin-bottom:-900px; 
}