Microsoft Edge不考虑某些伪元素'；CSS

有关守则：

我相信，它在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;
}

在Edge中，它看起来像： 它应该是这样的：

---

因此，出于某种原因，

边界半径

和

顶部

对伪值不起作用，但其他一切都起作用。

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

这是因为伪元素中对CSS自定义属性/变量的错误支持：看到了吗？答案就是不要在IE中使用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;
}