IE11 / Edge buggy box-shadow 渲染

Question

<style>
#a > span {
    box-shadow: 0px 0px 1px 3px red;
}
#a > span:hover {
    box-shadow: 0px 0px 1px 3px blue;
}
#a > span + span {
    margin-left: 20px;
}
</style>
<div id="a"><span>AAAA</span><span>BBBB</span><span>CCCC</span></div>

所需的输出应该是 box-shadow blue 覆盖 box-shadow red。 FF 做到了，Chrome 甚至 Safari。但是 IE11 和 Edge 给了我这些不错的悬停效果：

我错过了什么吗？或者是 MS 渲染那么糟糕？关于如何获得模糊的框阴影，跨浏览器解决方案，有什么建议吗？

（在我的真实代码中，我什至发抖！由不透明度为 0 的旋转元素引起的框阴影。）

Answer 1

您需要内联吗？如果不是，将 display: inline-block 添加到您的第一条规则应该可以在 IE 中解决此问题。

#a > span {
    box-shadow: 0px 0px 1px 3px red;
    display: inline-block;
}