internet-explorer - 使用边框半径（脊）时如何修复 IE 断角

Question

我正在使用以下样式设置 div：

border: ridge 5px #EEEEEE;
border-radius: 10px;

在 IE 中，山脊的顶部在右上角和左下角断裂。

它在 Firefox 中看起来不错。Safari 显示了类似的中断。我该如何解决或解决这个问题？

Answer 1

我以前见过这个。我最终做的是一个人造山脊。它需要更多标记，但确实有效。这是小提琴：http: //jsfiddle.net/mt2yA/4/

HTML

<div class="ridge-outer">
    <div class="ridge-inner">
        Content
    </div>
</div>

CSS

.ridge-outer {
    border: 2px solid #eee;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}
.ridge-inner {
    border: 2px solid #999;
    -webkit-border-radius: 13px;
    -moz-border-radius: 13px;
    border-radius: 13px;
    height: 200px;
    padding: 20px;
}