Question

我用css制作了一些花哨的按钮，但在IE9中，我的边框没有圆角。

HTML：

<div id="buttons">
  <a href="#"></a>
  <a href="#"></a>
  <a href="#"></a>
  <a href="#"></a>
  <a href="#"></a>
</div>

css：

#buttons a {
    margin: 2px 4px;
    border-radius: 13px;
    height: 25px;
    width: 25px;
    display: block;
    float: left;
    position: relative;
    background: rgb(178,91,91);
    background: -moz-linear-gradient(top,  rgba(178,91,91,1) 0%, rgba(252,200,200,1) 26%, rgba(89,52,52,1) 51%, rgba(254,254,254,1) 75%, rgba(85,52,54,1) 94%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(178,91,91,1)), color-stop(26%,rgba(252,200,200,1)), color-stop(51%,rgba(89,52,52,1)), color-stop(75%,rgba(254,254,254,1)), color-stop(94%,rgba(85,52,54,1)));
    background: -webkit-linear-gradient(top,  rgba(178,91,91,1) 0%,rgba(252,200,200,1) 26%,rgba(89,52,52,1) 51%,rgba(254,254,254,1) 75%,rgba(85,52,54,1) 94%);
    background: -o-linear-gradient(top,  rgba(178,91,91,1) 0%,rgba(252,200,200,1) 26%,rgba(89,52,52,1) 51%,rgba(254,254,254,1) 75%,rgba(85,52,54,1) 94%);
    background: -ms-linear-gradient(top,  rgba(178,91,91,1) 0%,rgba(252,200,200,1) 26%,rgba(89,52,52,1) 51%,rgba(254,254,254,1) 75%,rgba(85,52,54,1) 94%);
    background: linear-gradient(to bottom,  rgba(178,91,91,1) 0%,rgba(252,200,200,1) 26%,rgba(89,52,52,1) 51%,rgba(254,254,254,1) 75%,rgba(85,52,54,1) 94%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b25b5b', endColorstr='#553436',GradientType=0 );
    box-shadow: 0 0 3px rgba(0,0,0,0.2);
}

#buttons a:after {
    background: #a62434;
    background: -moz-linear-gradient(top,  #ea5160 0%, #a62434 40%, #771b22 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ea5160), color-stop(40%,#a62434), color-stop(100%,#771b22));
    background: -webkit-linear-gradient(top,  #ea5160 0%,#a62434 40%,#771b22 100%);
    background: -o-linear-gradient(top,  #ea5160 0%,#a62434 40%,#771b22 100%);
    background: -ms-linear-gradient(top,  #ea5160 0%,#a62434 40%,#771b22 100%);
    background: linear-gradient(to bottom,  #ea5160 0%,#a62434 40%,#771b22 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#771b22', endColorstr='#ea5160',GradientType=0 );
    box-shadow: inset 0 0 3px rgba(91,22,23,0.5);
    display: block;
    content: '';
    position: absolute;
    height: 21px;
    width: 21px;
    top: 2px;
    left: 2px;
    border-radius: 11px;
}

演示：
http://jsfiddle.net/JJqe7/

Answer 1

IE9可能会退回到旧的渲染引擎，因此不支持border-radius。尝试将以下元数据添加到<head>：

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

在此处查看更多内容：ie9 border radius

没有圆角边框：IE9中的选择器之后

1 个答案: