0

以下のコードは ie9 では動作しないようです。回避策はありますか? ありがとう

.orangeback {
/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(top, #FF6900 0%, #FF8214 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #FF6900 0%, #FF8214 100%);

/* Opera */ 
background-image: -o-linear-gradient(top, #FF6900 0%, #FF8214 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FF6900), color-stop(1, #FF8214));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #FF6900 0%, #FF8214 100%);

/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to bottom, #FF6900 0%, #FF8214 100%);
}
4

2 に答える 2

1

試す

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');/*For IE7-8-9*/

うまくいくかどうか教えてください。

于 2013-10-01T15:32:35.960 に答える
1

これはかなり近いです：

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ff6900', endColorstr='#ff8214',GradientType=0 );

これは IE6+ で動作します。

または、JUST IE9 の場合、filterオプションがボートを浮かせない場合は、次のスタイルを使用して SVG に置き換えることができます。

に追加.orangeback:

background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmNjkwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjgyMTQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

また、.ie9-gradientこれらの要素にクラスを追加し、終了headタグの前に次を追加します。

<!--[if gte IE 9]>
  <style type="text/css">
    .ie9-gradient {
       filter: none;
    }
  </style>
<![endif]-->

IE9 で CSS3 グラデーションに SVG ポリフィルを使用するには、フィルターを無効にする必要があるため、このコードはfilterIE6-8 のグラデーション フォールバックを保持し、IE9 では SVG を使用します。

あなたの場合、通常の 2 色の線形グラデーションを使用しているため、IE9 に SVG ポリフィルを使用する必要は実際にはありません。より複雑な勾配がある場合は、おそらく 2 番目のソリューションが望ましいでしょうが、目的のためには、filterソリューションを使用するだけで問題なく動作するはずです。

これ (または CSS プリプロセッサ) を使用すれば、もう CSS3 グラデーションについて心配する必要はありません: Colorzilla Gradient Generator

于 2013-10-01T15:34:16.813 に答える