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一起工作但不是没有。

PIE不会在IE9中渲染border-radius和box-shadow，因为IE9本身支持这两种。所以他们的存在并不表示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在I.E.中为我工作。 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）

在IE9中使用CSS3 PIE的线性渐变不起作用，IE8可以

6 个答案: