内容保留在 :before Div 覆盖在 IE 中

Question

我正在为这个叠加层苦苦挣扎。在 prod 站点上，:before 元素覆盖了带有完整图像背景的 div。在 Chrome 和 Firefox 中查看网站时，内容按预期显示在叠加层上方。但是，在 IE11 中查看内容时，:before 元素会覆盖该父元素中的所有内容 div。

我希望 Chrome 中的结果与 IE 中的结果相同。

例如叠加在图像上方，text/content在叠加层之上。

参见：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

首先删除 position:absolute 属性并添加以下属性，

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

内容保留在 :before Div 覆盖在 IE 中

Content remains behind :before Div overlay in IE

html

css

internet-explorer

overlay