0

私は他のいくつかの質問と回答を調べましたが、それでもSafari（v 5.1.7）でこれを機能させることはできません。

これが私のコードです-jsfiddle

.services   {
    width: 218px;
    float: left;
    margin-right: 29px;
}
.services img   {
    border: solid 8px #ccc;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.services a img:hover   {
    border: solid 8px #333;
    -o-transition: all 1s ease 0s;
    -ms-transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -webkit-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
}

画像は218pxx218pxの正方形なので、それと関係があると思いますが、境界線の半径をサポートしていない古いブラウザでも十分に見栄えがするように、そのようにしたかったのです。

それはおそらく単純なことですが、私はまだこれに固執しています。

ありがとう。アル。

4

1 に答える 1

0

サイトポイントからの回答：

うーん、トリッキー。代わりに境界線を配置すると機能します。

コード：

.services   {
    width: 218px;
    float: left;
    margin-right: 29px;
}

.services img   {
    vertical-align: top;
}

.services img, .services a   {
    border-radius: 50%;
}

.services a {
    border: 8px solid #ccc;
    display: inline-block;
}

.services a:hover   {
    border: 8px solid #333;
    -o-transition: all 1s ease 0s;
    -ms-transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -webkit-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
}

これからサポートするすべてのブラウザと同様に、ベンダープレフィックスなしでborder-radiusを使用できます。

于 2013-03-01T09:47:09.177 に答える