IE11 / Edge buggy box-shadow rendering

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>

The desired output should be that box-shadow blue overlays box-shadow red. FF does it, Chrome and even Safari. But IE11 and Edge give me these nice hover-effects:

Am I missing something? Or is MS rendering that bad? Any suggestions how to get a blury box-shadow instead, cross browser solution?

(In my real code I even got trembling! box-shadows caused by rotating elements with opacity 0.)

Answer 1

Is inline necessary for you? If it is not, adding display: inline-block to your first rule should fix this in IE.

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