使用边框半径（脊）时如何修复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;
}