internet-explorer - 使用边框半径(脊线)时如何修复 IE 破 Angular

Question

我正在使用以下样式设计一个 div:

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

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

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

Answer 1

我以前见过这个。我最终做的是一个人造山脊。它需要更多标记，但它可以 工作。这是 fiddle :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;
}