Question

在IE（＆gt; 9）和Microsoft Edge中，当边框宽度非常宽时，border-radius会出现错误。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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/

微软边缘边缘半径错误

1 个答案: