7

私のWebサイトでIE6とIE7のサポートを完全に廃止し、ユーザーをテキストのみの警告ページにリダイレクトすることにしました。しかし、私はまだIE8とIE9をサポートしています。

私はCSS3PIEを使用してこれを達成しており、border-radiusは両方（IE8 / 9）で機能し、box-shadowは両方で機能しますが、線形グラデーションにも依存しています。これを実現するために使用しているタグの山があります。

background: #E6E6E6; /* fallback */
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#E6E6E6), to(#B3BCC7)); /* old webkit */
background: -webkit-linear-gradient(#E6E6E6, #B3BCC7); /* new webkit */
background: -moz-linear-gradient(#E6E6E6, #B3BCC7); /* firefox */
background: -ms-linear-gradient(#E6E6E6, #B3BCC7); /* meant to be IE... */
background: filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#E6E6E6', endColorstr='#B3BCC7'); /* also meant to be IE... */
background: -o-linear-gradient(#E6E6E6, #B3BCC7); /* opera */
background: linear-gradient(#E6E6E6, #B3BCC7); /* W3C standard */
-pie-background: linear-gradient(#E6E6E6, #B3BCC7); /* PIE */

behavior: url(/PIE.htc); /* load PIE.htc */

奇妙なことに、線形グラデーションはIE8で機能しますが、IE9では機能しません。見つけた解決策を試しましたが、うまくいきませんでした。IE8はフォールバックを示しています：背景：＃E6E6E6; -グラデーションではありません。

他のプロパティ（ border-radiusとbox-shadow）はPIEで機能しますが、それなしでは機能しないため、サーバーなどに問題はないと思います。

サポートしているすべてのブラウザで機能するすべてのプロパティがあります-IE9ではありません:(

何か案は？
ありがとう

4

6 に答える 6

6

OK、これが私の修正です。確かにきれいではありませんが、機能します。

<style type="text/css">
body{
  background: #E6E6E6;
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#E6E6E6), to(#B3BCC7));
  background: -webkit-linear-gradient(#E6E6E6, #B3BCC7);
  background: -moz-linear-gradient(#E6E6E6, #B3BCC7);
  background: -ms-linear-gradient(#E6E6E6, #B3BCC7);
  background: -o-linear-gradient(#E6E6E6, #B3BCC7);
  background: linear-gradient(#E6E6E6, #B3BCC7);
  -pie-background: linear-gradient(#E6E6E6, #B3BCC7);

  behavior: url(/PIE.htc); 
}
</style>

<!--[if IE 9]><style>body{ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#E6E6E6', endColorstr='#B3BCC7'); behavior: url(/ie9-gradient-fix.htc); } </style><![endif]-->

編集：誰かがそれらを望むなら、PIE.htcはhttp://www.css3pie.comにあり、ie9-gradient-fix.htcはhttp://abouthalf.com/examples/ie9roundedbackgrounds/htc.zipにあります。ルートディレクトリにない限り、ie9-gradient-fix.htcを機能させることができませんでした。PIE.htcは/resources/ディレクトリで機能しました。

于 2012-05-06T03:04:27.267 に答える
5

他のプロパティ（border-radiusとbox-shadow）はPIEで機能しますが、そうでない場合は機能しないため、サーバーなどに問題はないと思います。

IE9はこれらの両方をネイティブにサポートしているため、PIEはIE9でborder-radiusとbox-shadowをレンダリングしません。したがって、それらの存在は、PIEが機能していることを示すものではありません。

私の推測では、実際には、PIE.htcに誤ったコンテンツタイプヘッダーが提供されていると思います。IE9はコンテンツタイプに関して特に厳格です。詳細については、 http：//css3pie.com/documentation/known-issues/#content-typeを参照してください。

于 2012-05-06T02:59:10.257 に答える
2

正しいコンテンツタイプヘッダー（text / x-component）を使用しても、線形グラデーションがIE9で機能していなかったため、私は大きな頭痛の種を抱えていました。

PIE 2.0にアップグレードすると、問題が解決しました。

http://css3pie.com/2013/01/28/pie-2-0-beta-1-released

于 2013-04-03T19:47:38.890 に答える
0

素晴らしい！私はPIE.phpを使用し、IE8、IE9でこのバグ（線形グラデーション+境界半径）を修正しました！

これを使用するには、PIE.phpとPIE.htcの両方が同じディレクトリにあることを確認してから、CSSで動作をPHPファイルにポイントします。

動作：url（PIE.php）;

于 2012-12-28T08:53:46.083 に答える
0

ie9-gradient-fix.htcはIE9で機能しましたが、動作をpie.htcからpie.phpに変更しても同じことが行われます。

マイクロソフトでは車輪がとてもゆっくりと回転しますが、反対方向にも回転する可能性があるようです。

于 2013-03-09T12:14:10.283 に答える
0

私の場合、私はを使用していましたが<!--[if lt IE 9]>、それを変更して<!--[if lt IE 10]>私の問題を修正しました（実際には私のIE cssファイルは含まれていません）。

<!--[if lte IE 9]>**も同じロジックを実行すると思います。

filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#88222222', EndColorStr='#00222222', GradientType=0);

PS。私はcss3pieをまったく使用していません（私はそうだと思っていました、derp）

于 2014-01-30T00:49:54.953 に答える