border-radius 在 IE 中创建一个轮廓答案

【问题标题】：border-radius creates an outline in IEborder-radius 在 IE 中创建一个轮廓
【发布时间】：2014-12-15 14:41:37
【问题描述】：

将border-radius 应用于具有白色边框的彩色div 时，背景颜色会出现在角落的白色边框之外。为什么会在 ie 中发生这种情况？（试过ie9和ie10）。

<div class="rounded"></div>

.rounded {
    display: inline-block;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
    border: 3px solid #fff;
    background: #f00;
    width: 100px;
    height: 100px;
}

body {
    background-color: #fff;
}

这里的问题是我真的需要白色边框，所以删除它或使其透明，正如一些人所建议的那样，不是一种选择。这是一个小提琴：http://jsfiddle.net/z0rt63e2/1/

【问题讨论】：

你能给我们展示一个 jsfiddle 或页面链接吗？这样我们就可以看到它的样子？
你尝试过 outline:none css 属性吗？
outline: none 无效
没有人可能知道为什么会发生这种情况，但这是一个很好的发现，您应该通知IE dev team。 Note 在使用插入框阴影时也会发生同样的情况。
@disinfor：是的，这似乎有效。

标签： css internet-explorer

【解决方案1】：

正如我上面的评论（为了得到答案），在你的 .rounded 类中使用 background-clip: content-box。

这里有一些阅读材料： http://www.css3.info/preview/background-origin-and-background-clip/

【讨论】：

不是内容框，而是填充框。你是如此接近，所以我接受你的回答。谢谢！
@tofu 太棒了！我很高兴你让它工作。我记得几年前遇到过同样的问题，content-box 就是为我解决的问题。

【解决方案2】：

根据这篇文章...Removing the image border in Chrome/IE9

试试，

 border-style:none;

这可能有帮助吗？

更新::我找到了这个链接..http://css-tricks.com/removing-the-dotted-outline/

根据它（一直在底部）我们必须添加元标记..

<meta http-equiv="X-UA-Compatible" content="IE=9" />

IE=edge 应该可以工作并使用最新的渲染引擎..

【讨论】：