css - IE9 は CSS 線形グラデーションをサポートしていますか?

Question

Chrome/Safari と Firefox には-webkit-gradientと-moz-linear-gradientプロパティがあります。IE9でこれと同じことを行うにはどうすればよいですか?

Answer 1

最適なクロスブラウザ ソリューションは

background: #fff;
background: -moz-linear-gradient(#fff, #000);
background: -webkit-linear-gradient(#fff, #000);
background: -o-linear-gradient(#fff, #000);
background: -ms-linear-gradient(#fff, #000);/*For IE10*/
background: linear-gradient(#fff, #000);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');/*For IE7-8-9*/ 
height: 1%;/*For IE7*/ 

Answer 2

ええと、IE9 はまだ完成していませんが、今のところ、SVG を使用する必要があるようです。IE9 での -ms-gradient またはグラデーションのサポートについては知りません。私がイライラしているこれまでに欠けているもう1つのことは、テキストシャドウです。

http://css3wizardry.com/2010/10/29/css-gradients-for-ie9/

Answer 3

W3C 標準に準拠している ( CSS バリデーターでエラーにならない) IE 9+ に関する最適なクロスブラウザー ソリューションは次のとおりです。

background-color: #fff; /* Browsers without linear-gradient support */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #000)); /* Chrome, Safari 4+ */
background-image: -webkit-linear-gradient(#fff 0%, #000 100%); /* Chrome 10+, Safari 5.1+ */    
background-image:    -moz-linear-gradient(#fff 0%, #000 100%); /* Fx 3.6+ */   
background-image:         linear-gradient(#fff 0%, #000 100%); /* W3C */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#ffffff', endColorstr='#000000')";

.gradient--test { 
    background-color: #fff; /* Browsers without linear-gradient support */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #000)); /* Chrome, Safari 4+ */
    background-image: -webkit-linear-gradient(#fff 0%, #000 100%); /* Chrome 10+, Safari 5.1+ */    
    background-image:    -moz-linear-gradient(#fff 0%, #000 100%); /* Fx 3.6+ */   
    background-image:         linear-gradient(#fff 0%, #000 100%); /* W3C */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#ffffff', endColorstr='#000000')";
}
.gradient--test {
  width: 61.8%;
  height: 200px;
 }

<div class=gradient--test></div>  

IE 9 は、標準に準拠したベンダー プレフィックス-ms-filter表記を導入すると同時に、独自のフィルターを非推奨にしました。

-o-ベンダー プレフィックスも必要ありません( -ms-IE 10 はグラデーションをサポートする最初の IE であり、W3C 標準構文をサポートしているため)。http://caniuse.com/#feat=css-gradients を参照してください
。より良い gzip 圧縮のために小文字の 16 進数の色値を優先し、の代わりにbackground-colorandを明確に記述します。これは、線形グラデーションがサポートされていないブラウザーでレンダリング エラーが発生する可能性があるためです。この質問に対する私の回答から大部分がコピーされました。background-imagebackground