Question

我正在努力解决这个问题。在prod网站上：before元素覆盖一个带有完整图像bg的div。在Chrome和Firefox中查看网站时，内容会按预期显示在叠加层上方。但是，在IE11中查看内容时：before元素覆盖该父div中的所有内容。

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

例如覆盖在图片上方，叠加层顶部的文字/内容。

请参阅：JSFiddle

＆＃13;

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

＆＃13;

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

＆＃13;

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

内容仍然落后：在IE中重叠Div之前

1 个答案: