0

コード：

body {
    background-color: #CACACA;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#CACACA), to(#F6FAFB));
    background-image: -webkit-linear-gradient(top, #CACACA, #F6FAFB);
    background-image:    -moz-linear-gradient(top, #CACACA, #F6FAFB);
    background-image:     -ms-linear-gradient(top, #CACACA, #F6FAFB);
    background-image:      -o-linear-gradient(top, #CACACA, #F6FAFB);
}

すべてのブラウザーとプラットフォームでこれを使用すると素晴らしいですが、IE 10 の場合、グラデーション ブロックは次のように繰り返されます。

ここに画像の説明を入力

IE 10 でこれを修正するにはどうすればよいですか?

IE 9 の場合、グラデーションは機能しません。#CACACA が表示されるだけです。IE 9 でもこれを修正するにはどうすればよいですか?

4

3 に答える 3

1

この 2 つのhttp://webdesignerwall.com/tutorials/cross-browser-css-gradient/comment-page-1とhttp://css3pie.com/をご覧ください.

于 2013-08-19T16:12:30.417 に答える
1

まず、IE10 の場合:

を削除して、接頭辞なし-ms-linear-gradientで使用します。linear-gradientIE10 はプレフィックスを必要とせず、IE9 はプレフィックスの有無にかかわらず、標準をまったくサポートしていません。したがって、-ms-プレフィックスはまったく不要です。

次に、IE9 の場合:

IE9 は、標準のグラデーション構文をサポートしていません。filterIE8 でサポートされている昔ながらのスタイルを使用できます。それは IE9 で動作しますが、それは最悪です -- ひどい構文で、暗黒時代に戻ったような気がしborder-radiusます。

代わりに、古き良きポリフィル スクリプトCSS3Pieを使用して、IE9 で標準のグラデーション構文をサポートすることをお勧めします。作業がはるかに簡単になります。

于 2013-08-19T16:13:46.800 に答える