Html IE11框阴影扩散和边界半径

我在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）不知怎的让这变得很奇怪：

边界半径似乎有偏差这里是一个JSFIDLE演示：

---

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

因为

框阴影

不会向元素添加额外的尺寸（AFAIK），您可以删除

插入

属性

---

您可以尝试将

边框

与

框阴影

混合。我不能保证它在每个浏览器中都能正常工作，但它确实修复了IE11中的问题。（请注意，我减少了填充以补偿边界）

---

为什么要使用

inset

以及边框有什么问题？非常好的问题@Paulie_D I gues我希望元素大小计算时没有框阴影。但你的评论确实回答了这个问题：这在IE11中看起来更好。非常感谢你。你可以发布一个答案吗？盒子的阴影不会增加尺寸（AFAIK）。是的，你是对的，我错了。我必须记住，当我把元素放在一起的时候，就像我评论中的链接一样，5分钟结束后，我会接受这个答案。非常感谢你。我仍然认为IE11不应该像这样渲染长方体阴影，或者我在这里遗漏了一点？事实上，这项工作，谢谢！但我对这种行为很感兴趣。好的补充。

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;
}

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;
}