html - IE 框阴影显示 1px 边框效果

标签 html css

我已经在 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/

相关文章:

javascript - 正则表达式用拉丁语中的重音字符拆分单词

html - 如何阻止按钮移动

IE 的 CSS 调试

html - 为什么我的 'clickable' <img> 被覆盖(因此不可点击)?它是由什么覆盖的?

javascript - 使用变化的变量调用本地存储

jquery - Bootstrap 下拉菜单在单击选择框时关闭

html - 网络音频 : how does timeConstant in setTargetAtTime work?

css - Em 使浏览器中的字体太大

css - 与 CSS 的移动不兼容

css - 启用将 Bootstrap 字形添加到输入