Microsoft edge border-radius 错误

Question

在 IE(>9) 和 Microsoft Edge 中，当 border-width 很宽时，border-radius 有一个错误。

.number {
    display: inline-block;
    position: relative;
    left: -3px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    
    background: #ff7322;
    border-radius: 50px;
    border: 8px solid #f0f0f0;
    
    color: #FFFFFF;
    font-size: 22px;
    font-weight: bold;
}

<span class="number">1.1</span>

Answer 1

它的错误 IE

这些问题有一个解决方法：元素可以替换为两个嵌套元素，其中内部元素具有所需的背景颜色作为其背景，而外部元素的背景颜色等于所需的边框颜色，并且外部元素的填充等于所需的边框宽度。

HTML

 <div class="ok"><div>…</div></div>

CSS

    .ok {
        background: #000; /* Border color */
        border-radius: 100px;
        padding: 70px; /* Border width */
    }

    .ok > DIV {
        background: #fff; /* Background color */
        border-radius: 30px; /* Radius of outer element minus border  width */
        height: 60px; /* For illustration purposes */
    }

示例和来源： http://tanalin.com/_experimentz/demos/blog/2011/border-radius-rendering/

Microsoft edge border-radius 错误

Microsoft edge border-radius bugs

css

internet-explorer-9

microsoft-edge