我已经在 mark 标签上应用了框阴影以在右侧和左侧提供额外的空间,除了 IE 所有其他浏览器看起来都很好。但在 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>
最佳答案
<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>
关于html - IE 框阴影显示 1px 边框效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47329813/