在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; - 不是漸變。

我不認為服務器或類似的東西有什么問題，因為其他屬性 - border-radius和box-shadow - 與PIE一起工作但不是沒有。

我有所有的屬性在我支持的所有瀏覽器中工作 - 只是沒有IE9 :(

有任何想法嗎？
謝謝

Answer 1

好的，這是我的修復。 它當然不漂亮，但它的工作原理。

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

編輯：如果有人想要它們，可以在http://www.css3pie.com找到PIE.htc，在http://abouthalf.com/examples/ie9roundedbackgrounds/htc.zip找到ie9-gradient-fix.htc。 我無法使ie9-gradient-fix.htc工作，除非它在根目錄中，PIE.htc在我的/ resources /目錄中工作。

Answer 2

我不認為服務器或類似的東西有什么問題，因為其他屬性 - border-radius和box-shadow - 與PIE一起工作但不是沒有。

由於IE9本身支持這兩種，因此PIE不會在IE9中渲染border-radius和box-shadow。 所以他們的存在並不表示PIE正在發揮作用。

我的猜測實際上是你的PIE.htc使用了錯誤的內容類型標題 - IE9對內容類型特別嚴格。 有關詳細信息，請參見http://css3pie.com/documentation/known-issues/#content-type 。

Answer 3

我很頭疼，因為即使使用正確的內容類型標題（text / x-component），線性漸變也無法在IE9上運行。

升級到PIE 2.0解決了這個問題。

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

Answer 4

大！ 我使用了PIE.php並在IE8，IE9中修復了這個bug（線性漸變+ border-radius）！

要使用它，只需確保PIE.php和PIE.htc都在同一目錄中，然后在CSS中指向PHP文件的行為：

行為：網址（PIE.php）;

Answer 5

ie9-gradient-fix.htc在IE 9中為我工作，但后來再次從pie.htc改變行為到pie.php也做了同樣的事情。

微軟的輪子轉得這么慢，但看起來它們也可能轉向相反的方向？

Answer 6

在我的情況下，我使用<!--[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）