IE11 /边缘buggy盒-阴影绘制

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>

所需的输出应该是框影蓝色覆盖框影红色。FF做到了，Chrome，甚至Safari。但是IE11和Edge给了我这些很好的悬停效果：

​

​

我是不是遗漏了什么？还是MS渲染得那么糟糕？有什么建议，如何得到模糊的框-阴影，交叉浏览器的解决方案？

(在我的真实密码中，我甚至感到颤抖！框-由不透明度为0的旋转元素造成的阴影。

Answer 1

内联对你来说是必要的吗？如果不是，将display:内联块添加到您的第一个规则中应该可以在IE中修复这个问题。

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