IE框阴影显示1像素边框效果

Question

我已经在mark标签上应用了盒子阴影，以便在右侧和左侧提供额外的空间。除了IE浏览器之外，所有其他浏览器看起来都很好。但是在IE中，它显示出一个像边框一样的1像素效果。有没有解决这个问题的方法？

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>

- Anand Paul

---

这并不简单，我的文本在一个标签中占据了两行或三行。 - Anand Paul

合适的解决方案是使用填充和 box-decoration-break 结合使用（遗憾的是，IE/Edge 还不支持此功能）。 - CBroe

是的，我需要一个IE的解决方案。 - Anand Paul

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>

- Manish Kumar