IE11 - border-radius 和 box-shadow 一起导致问题答案

【问题标题】：IE11 - border-radius and box-shadow together cause problemsIE11 - border-radius 和 box-shadow 一起导致问题
【发布时间】：2018-02-22 03:31:41
【问题描述】：

遵循我的代码：

div{
  display: block;
  width: 500px;
  height: 200px;
  border: 1px solid black;
  border-radius: 5px;
  transition: box-shadow 1s;
}

div:hover{
    box-shadow: 25px 25px 0px #000;
}

&lt;div&gt;Test&lt;/div&gt;

它适用于 Chrome、Safari 和 Firefox，但在 Internet Explorer 11 上效果不佳，当 div 不再是焦点时会出现明显的视觉问题。如何解决？

JSFiddle：https://jsfiddle.net/aL0t8g21/

【问题讨论】：

你是如何测试 IE11 的？ IE10、11 和 Edge 在我看来都和 Chrome 一样。
@JenniferMichelle 正如 Bob 所描述的，当我悬停 div 时，我可以看到奇怪的伪影。在我看来像是 IE 渲染引擎的问题，因此我认为很难解决。您可以尝试对阴影动画使用 JS 解决方法，即使对于纯 IE 解决方案来说这可能有点过分
是的，我也尝试过解决它我同意@MatthiasS。 IE 的渲染引擎存在问题，如果您愿意，我可以使用 :after 或 :before of you div 为您创建一个解决方法。
@weber 好的，谢谢，这将非常有用...
@weber 谢谢，您的解决方案并不优雅，但它有效。如果没有人找到更好的解决方案，我会接受。

标签： html css internet-explorer internet-explorer-11

【解决方案1】：

进行了更新，让它变得更好。

根据您的评论要求，这里有一个解决方法供您使用 :after 或 :before of you div。

div {
  display: block;
  width: 500px;
  height: 200px;
  border: 1px solid black;
  border-radius: 5px;
  transition: box-shadow 1s;
  position: relative;
  background: #fff;
}

div:after {
  content: '';
  display: block;
  position: absolute;
  width: 500px;
  height: 200px;
  border-radius: 5px;
  background: #000;
  left: 0;
  top: 0;
  opacity: 0;
  transition: all 1s ease-in-out;
  z-index: -1;
}

div:hover:after {
  left: 25px;
  top: 25px;
  opacity: 1;
}

&lt;div&gt;Test&lt;/div&gt;

jsfiddle

这在 IE 11 中运行良好。

【讨论】：