IE9でCSS3 PIEを使用した線形勾配が機能しない、IE8が

Question

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

私はCSS3 PIEを使ってこれを達成していますが、border-radiusは両方の（IE8/9）、ボックスシャドウの両方で動作しますが、私はリニアグラデーションにも依存しています。私はこれを達成するために使用中のヒープタグを持っています。

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; - 勾配ではありません。

他のプロパティので、私は、それはそのようなサーバーか何かに何か問題はないと思う - ボーダー半径とボックスシャドウは - なしPIEでは動作しなく。

私がサポートするすべてのブラウザで動作するすべてのプロパティを持っている

- だけではないIE9 :(

任意のアイデア
おかげ

Answer 1

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]--> 

EDIT：誰もがそれを望んでいる場合は、PIE.htcがhttp://www.css3pie.comで発見され、ie9-gradient-fix.htcがhttp://abouthalf.com/examples/ie9roundedbackgrounds/htc.zipで発見されました。私はie9-gradient-fix.htcをルートディレクトリに置かないと動作させることができませんでした.PIE.htcは/ resources /ディレクトリにありました。

Answer 2

私はそれがに何か問題だと思いませんか？それ以外のプロパティ（border radiusとbox shadow）はPIEで動作しますが、そうでない場合はPIEで動作します。

PIEはIE9でボーダー半径とボックスシャドウをIE9でレンダリングしませんそれらの両方をネイティブに移植します。したがって、彼らの存在は、PIEが働いていることを示すものではありません。

あなたのPIE.htcは、間違ったcontent-typeヘッダーで提供されていると私は推測しています。IE9は特にcontent-typeについて厳密です。詳細は、http://css3pie.com/documentation/known-issues/#content-typeを参照してください。

Answer 3

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

行動を：代わりに、PHPファイルへの行動を、それを使用するだけでPIE.phpとPIE.htcの両方が同じディレクトリにあることを確認した後、あなたのCSSポイントINに

URL（PIE .php）;

Answer 4

ie9-gradient-fix.htcは、I.E.しかし、やはりpie.htcからpie.phpに振る舞いを変更することも同じことです。

車輪はマイクロソフトで非常にゆっくりと回転しますが、反対方向に回転することもありますか？

Answer 5

正しいコンテンツタイプのヘッダー（text/x-component）であっても、直線勾配はIE9では機能していなかったので、大きな頭痛を覚えました。

PIE 2.0にアップグレードすると問題が解決しました。私の場合は

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

Answer 6

私は<!--[if lt IE 10]>にそれを変更し、<!--[if lt IE 9]>を使用していた（actualy私のIEのCSSファイルを含めないで）私の問題を修正しました。

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

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

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