MS Edge：溢出：隐藏不适用于盒子阴影

Question

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

查看示例：

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

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

https://jsfiddle.net/8u43mztw/

在 Chrome 上查看时，它看起来像这样：

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

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

Answer 1

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

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

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

MS Edge：溢出：隐藏不适用于盒子阴影

MS Edge: overflow: hidden not working on box-shadow

html

css

overflow

microsoft-edge

box-shadow