IE11 Box-shadow spread 和border-radius答案

【问题标题】：IE11 Box-shadow spread and border-radiusIE11 Box-shadow spread 和border-radius
【发布时间】：2014-06-15 16:41:25
【问题描述】：

我在 IE11 中看到一个渲染问题，当涉及到带有圆角边框的元素上的多个框阴影时。在这个用例中，我尝试不使用边框，而只使用框阴影来为按钮创建一些清晰的轮廓。

box-shadow: 0 0 0 1px #000000 inset, 0 0 0 2px rgba(255, 255, 255, 0.9) inset;
background-color: blue;
color: white;
display: inline-block;
padding: 5px 10px;
text-decoration: none;

这个 CSS 应该创建一个带有黑色轮廓和白色内联的框，如下所示：

到目前为止一切顺利。当我还添加一些边框半径时，Firefox 和 Chrome 中的结果看起来很像这样：

这是想要的效果。但是 IE (11) 不知何故使这很奇怪：

边界半径似乎关闭了。 这是一个 jsFiddle 演示：http://jsfiddle.net/ebjWB/1/

有没有人知道我可以对这个模糊的边界做什么，或者我必须使用实际大小的边界或阴影吗？

【问题讨论】：

你为什么使用inset，边框有什么问题？
很好的问题@Paulie_D 我想我想要在没有盒子阴影的情况下计算元素大小。但是您的评论确实回答了这个问题：jsfiddle.net/ebjWB/2 这在 IE11 中看起来更好。非常感谢。您可以发布答案吗？
Box-shadow 不会增加尺寸（AFAIK）。
是的，你是对的，我的错。我要记住，当我将元素彼此相邻放置时，例如在我评论中的链接中

标签： html css

【解决方案1】：

由于box-shadow 不会为元素添加额外的维度 (AFAIK)，您只需删除 inset 属性即可。

JSfiddle

a
{
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9), 0 0 0 2px #000000  ;
    background-color: blue;
    color: white;
    display: inline-block;
    padding: 5px 10px;
    text-decoration: none;
}

【讨论】：

我会在 5 分钟结束后接受这个答案。非常感谢。我仍然认为 IE11 不应该像这样渲染 box-shadow 还是我在这里漏掉了一点？

【解决方案2】：

您可以尝试将border 与box-shadow 混合使用。我不能保证它适用于所有浏览器，但它确实修复了 IE11 中的问题。（请注意，我已经减少了填充以补偿边框）

a {
    box-shadow: 0 0 0 1px #000;
    border: 1px solid rgba(255, 255, 255, 0.9);
    background-color: blue;
    color: white;
    display: inline-block;
    padding: 3px 8px;
    text-decoration: none;
}

【讨论】：

这个工作其实，谢谢！但我对这种特定的 IE 行为很感兴趣。无论如何都很好。