css - Microsoft Edge 不遵守某些伪元素的 CSS

Question

有问题的代码:http://jsbin.com/bisimeyija/edit?html,css,output

我相信它在 Chrome/Safari/Firefox 甚至 IE11 中都运行良好。

HTML

<div class="img-Offset">
  <div class="img-Offset_ImageContainer">
    <img src="http://placehold.it/430x350" alt="">
  </div>

  <p class="img-Offset_Caption">Scott Preston and his wife Laura</p>
</div>

:root {
  --Theme_Primary-dark: #f98183;
}

CSS

.img-Offset {
  position: relative;
  z-index: 1;

  max-width: 520px;
  width: 100%;
}

.img-Offset::after {
  content: '';

  position: absolute;
  top: 90px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;

  display: block;

  background-color: var(--Theme_Primary-dark);
  border-radius: 5px;
}

.img-Offset_ImageContainer {
  position: relative;

  padding-left: 90px;

  border-radius: 5px;
  border-bottom-right-radius: 0;
}

.img-Offset_Caption {
  margin-top: 14px;
  padding-right: 30px;
  padding-bottom: 21px;
  padding-left: 90px;

  font-weight: 500;

  color: #fff;
}

在 Edge 中它看起来像:它应该看起来像:

所以出于某种原因，border-radius 和 top 没有在 pseudo 上工作，但其他一切都可以。

Answer 1

这似乎是与 CSS 变量的使用有关的问题。如果将背景颜色更改为简单的十六进制值，问题就会消失。