IE11 /邊車箱陰影渲染

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和邊緣給我這些漂亮的懸停效果：

​​

我缺少的東西？或者是MS渲染那麼糟糕？任何建議如何獲得blury box-shadow，而不是跨瀏覽器解決方案？

（在我真正的代碼，我甚顫抖！箱的陰影所造成的旋轉不透明度爲0元）

Answer 1

是直列必要嗎？如果不是，將顯示：inline-block添加到您的第一條規則應該在IE中修復此問題。

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