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