0

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/

4

1 に答える 1

0

IE9 は、border-radius をサポートしない古いレンダリング エンジンにフォールバックする可能性があります。次のメタを に追加してみてください<head>:

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

詳細はこちら: ie9 ボーダー半径

于 2012-08-11T09:57:24.387 に答える