IE box shadowは1pxボーダのような効果を表示します

Question

マーク・タグにボックス・シャドウを適用して、右と左に余分なスペースを与えました。他のブラウザはすべて他のブラウザと同様ですが、IEでは1pxボーダーのようです。これに対する解決策はありますか？

mark { 
 
    font-size: 24px ; 
 
    background-color: rgba(0,0,0,0.5); 
 
    line-height: 48px; 
 
    max-width:350px; 
 
    color: #fff; 
 
    -webkit-box-shadow: rgba(0,0,0,0.5) -15px 0 0 0, rgba(0,0,0,0.5) 15px 0 0 0; 
 
    -moz-box-shadow: rgba(0,0,0,0.5) -15px 0 0 0, rgba(0,0,0,0.5) 15px 0 0 0; 
 
    box-shadow: rgba(0,0,0,0.5) -15px 0 0 0, rgba(0,0,0,0.5) 15px 0 0 0; 
 
}

<mark>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</mark>

Answer 1

<style> 
    mark { 
    font-size: 24px ; 
    line-height: 48px; 
    max-width:350px; 
    color: #fff; 
    background-color: rgb(68,68,68); /* Needed for IEs */ 
    -moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
    -webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
    box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30); 
    -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)"; 
    zoom: 1; 
    } 
</style> 

<mark>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</mark>