在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）