为什么`Box-shadow`不会显示在IE11的底部？

Question

我使用伪选择器将box-shadow添加到display: flex; flex-flow: row wrap;元素，它在chrome和safari中工作，但是在IE11中它会浮动到右侧而不是底部，我认为它是因为flex-flow: row wrap;。关于什么的想法？

.main {
  max-width: 1200px;
  overflow: hidden;
  height: 600px;
}

img {
  display: block;
}

.hero-image {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  width: 100%;
  position: relative;
}

.hero-image::after {
  display: block;
  position: absolute;
  content: '';
  width: 100%;
  -webkit-box-shadow: 0 -5px 50px #000;
  box-shadow: 0 -5px 50px #000;
  height: 100%;
  z-index: 99;
}

.div--1 {
  flex-basis: 100%;
  order: 1;
  height: auto;
}

.div--2 {
  background-color: #333d47;
  padding: 10px 40px;
  line-height: 1;
  flex-basis: 100%;
  text-align: center;
  color: #FFF;
  order: -1;
}

<div class="main">
  <div class="hero-image">
    <div class="div--1">
      <img src="https://picsum.photos/1200/300?image=0" />
    </div>
    <div class="div--2">some text here</div>
  </div>
</div>

Answer 1

您在top: 0;上错过了.hero-image::after。否则阴影将被文本和图像拉下来。

＆＃13;

＆＃13;

.main {
  max-width: 1200px;
  overflow: hidden;
  height: 600px;
}

img {
  display: block;
}

.hero-image {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  width: 100%;
  position: relative;
}

.hero-image::after {
  display: block;
  position: absolute;
  top: 0;
  content: '';
  width: 100%;
  -webkit-box-shadow: 0 -5px 50px #000;
  box-shadow: 0 -5px 50px #000;
  height: 100%;
  z-index: 99;
}

.div--1 {
  flex-basis: 100%;
  order: 1;
  height: auto;
}

.div--2 {
  background-color: #333d47;
  padding: 10px 40px;
  line-height: 1;
  flex-basis: 100%;
  text-align: center;
  color: #FFF;
  order: -1;
}

＆＃13;

<div class="main">
  <div class="hero-image">
    <div class="div--1">
      <img src="https://picsum.photos/1200/300?image=0" />
    </div>
    <div class="div--2">some text here</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

阴影在图像上方：

＆＃13;

＆＃13;

.main {
  max-width: 1200px;
  overflow: hidden;
  height: 600px;
}

img {
  display: block;
}

.hero-image {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  width: 100%;
  position: relative;
}

.div--1::after {
  display: block;
  position: relative;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0, 0, 0, 0)), to(#000));
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, #000 100%);
  margin-top: -120px;
  height: 120px;
  width: 100%;
  content: '';
}

.div--1 {
  flex-basis: 100%;
  order: 1;
  height: auto;
}

.div--2 {
  background-color: #333d47;
  padding: 10px 40px;
  line-height: 1;
  flex-basis: 100%;
  text-align: center;
  color: #FFF;
  order: -1;
}

＆＃13;

<div class="main">
  <div class="hero-image">
    <div class="div--1">
      <img src="https://picsum.photos/1200/300?image=0" />
    </div>
    <div class="div--2">some text here</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;