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

Posted 2023-03-06

【中文标题】IE11 - border-radius 和 box-shadow 一起导致问题

【英文标题】：IE11 - border-radius and box-shadow together cause problems

【发布时间】：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;

<div>Test</div>

它适用于 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 谢谢，您的解决方案并不优雅，但它有效。如果没有人找到更好的解决方案，我会接受。

【参考方案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;

<div>Test</div>

jsfiddle

这在 IE 11 中运行良好。