线性梯度使用CSS3 PIE在IE9不工作，IE8 [英] linear-gradient using CSS3 PIE in IE9 not working, IE8 does

问题描述

我决定完全放弃对我的网站中的IE6和IE7的支持，将其重定向到一个纯文本警告页面。但是我仍然支持IE8和IE9。

I've decided to completely drop support for IE6 and IE7 in my website, redirecting it's users to a text-only warning page. However I still support IE8 and IE9.

我使用 CSS3 PIE ，和border-radius工程在两个（IE8 / 9），箱阴影工程在这两个，但是我也依赖于线性梯度。我有堆的标签在使用中实现这：

I am achieving this using CSS3 PIE, and border-radius works in both (IE8/9), box-shadow works in both, however I also rely on linear-gradient. I have heaps of tags in use to achieve this:

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配合使用，但不能与之配合。

I don't think it's anything wrong with the server or anything like that, because the other properties - border-radius and box-shadow - work with PIE but not without.

我有所有的属性，在我支持的所有浏览器 - 只是不是IE9：（

I've got all the properties to work in all browsers I support - just not IE9 :(

任何想法？

感谢

Any ideas?
Thanks

推荐答案

确定，这里是我的修补程序，它肯定不漂亮，但它的工作原理。

OK, here's my fix. It certainly isn't pretty, but it works.

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

编辑：如果任何人想要它们，PIE.htc可以在http://www.css3pie.com 和ie9-gradient-fix.htc可在 http://abouthalf.com/examples/ie9roundedbackgrounds/htc.zip 。我无法让ie9-gradient-fix.htc工作，除非它在根目录中，PIE.htc在我的/ resources /目录中工作。

If anybody wants them, PIE.htc is found at http://www.css3pie.com and ie9-gradient-fix.htc is found at http://abouthalf.com/examples/ie9roundedbackgrounds/htc.zip. I couldn't get ie9-gradient-fix.htc to work unless it was in the root directory, PIE.htc worked in my /resources/ directory.

这篇关于线性梯度使用CSS3 PIE在IE9不工作，IE8的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！