2

以下は、ボタンを描画するために作成した CSS コードです。これを Chrome で表示すると、ボタンは本来の円形に見えますが、Firefox と IE では正方形です。なぜこれが当てはまるのでしょうか？

<!-- language: lang-css -->

    .button {
        width:90px;
        float:right;
        background:#FEDA71;
        background:-moz-linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
        background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#FEDA71),color-stop(100%,#FEBB49));
        background:-webkit-linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
        background:-o-linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
        background:-ms-linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
        background:linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
        padding:8px 18px;
        color:#623F1D;
        font-family:'Helvetica Neue',sans-serif;
        font-size:16px;
        -moz-border-radius:48px;
        -webkit-border-radius:48px;
        border:1px solid #623F1D
    }

以下のコードにより、Firefox は動作を開始しましたが、IE はまだ動作しません

Code after change and still doensnt work

background:#FEDA71;
    background:-moz-linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
    background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#FEDA71),color-stop(100%,#FEBB49));
    background:-webkit-linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
    background:-o-linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
    background:-ms-linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
    background:linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FEDA71',endColorstr='#FEBB49',GradientType=0);
    padding:8px 18px;
    color:#623F1D;
    font-family:'Helvetica Neue',sans-serif;
    font-size:16px;
    border-radius:48px;
    -moz-border-radius:48px;
    -webkit-border-radius:48px;
    border:1px solid #623F1D
4

4 に答える 4

6

border-radiusプロパティのプレフィックスなしのバージョンを使用しているのではなく、-moz-border-radiusとだけ-webkit-border-radiusです。(ちなみに、どちらのエンジンも長い間border-radius、ベンダー プレフィックスのないプロパティをサポートしてきました — Chrome は 5.0 以降、Firefox は 4.0 以降です — したがって、これが理由でない限り、わざわざそれらを使用しないでください。)

于 2013-02-28T15:41:36.767 に答える
0

追加してみる

-moz-border-radius:48px;
-webkit-border-radius:48px;
border-radius:48px;

古い IE バージョンの場合は、PIE を試してみてください http://css3pie.com/

于 2013-02-28T15:44:02.287 に答える
0

-moz-border-radiusは、2012 年 6 月 5 日にFirefox 13border-radiusとしてリリースされたエイリアスとして Gecko 13.0 から削除されたため、それ以降のバージョンの Firefox ではプレフィックスがサポートされていないため、 Firefox はスタイルを適用していません。-mozborder-radius

-webkit-border-radiusエイリアスとして引き続きサポートされているため、スタイルが Chrome に適用されています。

他の人が指摘しているように、プレフィックスなしを追加するborder-radiusと、Firefox の欠落しているスタイルが修正されます。

于 2013-02-28T15:51:15.310 に答える
-1

次のコードを追加してみてください。

border-radius:48px;      //W3C
于 2013-02-28T15:42:53.430 に答える