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 및 Edge 나에게 이런 좋은 호버 효과를 줄? 또는 MS 렌더링이 좋지 않습니까? 대신 blury box-shadow를 얻는 방법에 대한 제안, 브라우저 간 솔루션?

Answer 1

당신을 위해 인라인 필요가

(불투명도 0을 가진 요소를 회전에 의한 내 실제 코드에서 나는 심지어 떨고있어! 박스 그림자)? 그렇지 않으면 첫 번째 규칙에 display : inline-block을 추가하여 IE에서이 문제를 해결해야합니다.

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