4

WordPress テーマを作成しています。4 つの画像があり、境界線のある円として表示されます。

私のHMTLコードは次のとおりです。

<div class="row homeCategoryImageLinks">
    <div class="columns large-3">
        <a href="#">
            <img src="http://placehold.it/195x195" />
        </a>
    </div>
    <div class="columns large-3">
        <a href="#">
            <img src="http://placehold.it/195x195" />
        </a>
    </div>
    <div class="columns large-3">
        <a href="#">
            <img src="http://placehold.it/195x195" />
        </a>
    </div>
    <div class="columns large-3">
        <a href="#">
            <img src="http://placehold.it/195x195" />
        </a>
    </div>
</div>

これは私のCSSコードです:

.homeCategoryImageLinks a
{
    z-index: 3502;
    display: block;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.homeCategoryImageLinks a img
{
    display: block;
    border: 5px solid #FFF;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.45);
    -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.45);
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.45);
}

問題は、このコードは私がテストしたどのブラウザーでも問題なく動作しますが、Safari では動作しないことです。

望ましい結果は次のようになります。

ここに画像の説明を入力

そしてSafariはこれを返します:

ここに画像の説明を入力

どうすればその問題を解決できますか?

注: 上記のコードは、テスト済みのすべてのブラウザーで必要に応じて機能しますが、Safari では機能しません。Safari Web ブラウザーは例外です。

注2：ここで問題をライブで見ることができます：http://jsfiddle.net/87EZV/1/

敬具。

4

3 に答える 3

2

Safari にはバグがありborder-radiusます: -webkit-border-radius は -moz-border-radius とは異なる動作をします

イメージの親ラッパーにborder-radiusandを適用することをお勧めします。overflow: hiddenその親は、その中の画像をクリップします。

display: block適用するかposition: relative、ブラウザーがスタイリングを受け入れるようにする必要がある場合があります。

于 2013-10-18T07:05:30.283 に答える
1

試す

.homeCategoryImageLinks a{
        display: inline-block;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        -khtml-border-radius: 50%;
        border: 5px solid #fff;
}

デモはこちら

于 2013-10-18T07:05:36.413 に答える