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

Question

我使用伪选择器向 display: flex; flex-flow: row wrap; 元素添加了 box-shadow 它在 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

您只是在 .hero-image::after 上缺少一个 top: 0;。否则阴影会被文字和图片拉低

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

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

图像上有阴影：

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

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

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

Why `Box-shadow` Is not displayed at the bottom in IE11?

html

css

css-selectors

internet-explorer-11

box-shadow