Inhalt bleibt zurück: vor Div-Overlay in IE

Question

Ich habe mit diesem Overlay zu kämpfen. Auf der Produktseite überlagert das: before-Element ein div mit einem vollständigen Bild bg. Beim Anzeigen der Website in Chrome und Firefox wird der Inhalt wie beabsichtigt über dem Overlay angezeigt. Beim Anzeigen des Inhalts in IE11 überlagert das Element: before jedoch alles in diesem übergeordneten div.

Ich möchte, dass das Ergebnis in Chrome das gleiche in IE ist.

Ex. Overlay über Bild, Text/Inhalt über dem Overlay.

See: 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

Dieser den Trick tun wird,

check this fiddle here

erste Position entfernen: absolute Eigenschaft, und fügen Sie folgende Eigenschaften,

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

so Ihre endgültige CSS wird wie folgt sein,

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