MS Edge：溢出：隐藏不在box-shadow

Question

我已将大box-shadow应用于position: absolute <div>。它的父<div>设置overflow: hidden设置（根据我的理解）应该隐藏任何溢出的box-shadow - 这在Chrome上运行得很好，但由于某些原因不在MS Edge上。

请参阅此处的示例：

＆＃13;

＆＃13;

.outerbox {
  width: 600px;
  height: 600px;
  background-color: red;
}

.innerbox {
  width: 300px;
  height: 300px;
  margin-top: 150px;
  margin-left: 150px;
  display: table;
  background-color: #fff;
  position: fixed;
  overflow: hidden;
}

.shadowbox {
  position: absolute;
  left: 50px;
  width: 200px;
  top: 50px;
  height: 200px;
  box-shadow: 0px 0px 0px 100px rgba(0, 0, 0, 0.85);
}

＆＃13;

<div class="outerbox">
  <div class="innerbox">
    <div class="shadowbox">
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

https://jsfiddle.net/8u43mztw/

在Chrome上观看时，可能会出现如下情况：

但在MS Edge上查看时，显示如下：

由于某些原因，在Edge上，将父级框上的overflow: hidden设置为已应用box-shadow的框无效。 Chrome可以轻松隐藏溢出的box-shadow。我在这里做错了什么，或者有解决方法吗？

Answer 1

在Firefox中也是如此。尝试从display: table;中删除.innerbox：在Firefox中运行正常。

＆＃13;

＆＃13;

.outerbox {
  width: 600px;
  height: 600px;
  background-color: red;
}

.innerbox {
  width: 300px;
  height: 300px;
  margin-top: 150px;
  margin-left: 150px;
  background-color: #fff;
  position: fixed;
  overflow: hidden;
}

.shadowbox {
  position: absolute;
  left: 50px;
  width: 200px;
  top: 50px;
  height: 200px;
  box-shadow: 0px 0px 0px 100px rgba(0, 0, 0, 0.85);
}

＆＃13;

<div class="outerbox">
  <div class="innerbox">
    <div class="shadowbox">
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;