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不会处理伪，但其他一切都是。

Answer 1

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