7

http://jsfiddle.net/7KDr8/7/

Safari 6.0.1 と次のスタイルを使用すると、ボタンが「バグのある」方法でレンダリングされます。

このバグは Safari でのみ発生します。

ここに画像の説明を入力

.btn {
    height: 40px !important;
    line-height: 40px !important;
    overflow: hidden;
    padding: 0 20px;
    text-align: center;
    margin: 0 auto;
    float: left;
    margin-bottom: 40px;
    background-color: #15518d;
    background-repeat: no-repeat !important;
    border-bottom: 4px solid #032a52 !important;
    text-shadow: 0 0 3px rgba(0,0,0,.2);
    color: #fff !important;
    font-weight: 500;
    font-size: 15px !important;
    border-radius: 4px;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    text-transform: none !important;
    cursor: pointer
}

ご覧のとおり、ボタンの右の境界線は「繰り返し」始めているように見え、ボタンの左の境界線は、下部にのみあるはずの色の一部を持っています。

誰かが以前にこのバグに遭遇したか、修正を知っていますか? ありがとう！

4

5 に答える 5

9

原因

これは、ハードウェア対応の Safari に関連するバグです。

「 」の「 Automatic Graphics Switching」の下にある「 」を無効にすることで確認できます (バージョン 6 以降は Windows AFAIK では利用できないため、Mac を使用していると想定しています)。EnergySystem Preferences

これはバグなので、Safari コードで修正する必要があります。

古典的な回避策

ボタンを画像として保存すると、昔ながらの方法ですべてのブラウザーで動作します。作業量 (および帯域幅) が少し増えますが、安定した結果が得られます。

クリッピング

可能な解決策 -

この投稿から: Safari で境界線の半径が 965 ピクセルを超える垂直線が外れている

-webkit-background-clip: padding-box;CSSに追加します。

于 2013-07-09T19:36:42.553 に答える
1

私はあなたが使うべきだと思います

-webkit-border-radius: 5px;

必要な半径が得られます。

于 2013-07-10T23:07:57.433 に答える
0

これを試すことができます：

.selector {
    -webkit-border-radius: 10px;
    -moz-border-radius:10px;
    border-radius:10px;
    -khtml-border-radius: 10px;
}

そのリンクに従ってください: DEMO

于 2016-03-07T11:29:24.493 に答える