linear-gradient using CSS3 PIE in IE9 not working, IE8 does

综合技术 2017-12-31

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.

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 */

linear-gradient works in IE8, but not IE9, oddly. I've tried any solutions I've found, but they haven't worked. IE8 just shows the fallback: background: #E6E6E6;
- not a gradient.

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.

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

Any ideas?

Thanks

Problem courtesy of: stackunderflow

Solution

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

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); 
}


EDIT: If anybody wants them, PIE.htc is found at
http://www. css3
pie.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.

Solution courtesy of: stackunderflow

Discussion

Great! i used PIE.php and fixed this bug (linear-gradient + border-radius) in IE8, IE9!

To use it, simply make sure both PIE.php and PIE.htc are in the same directory, and then in your CSS point the behavior to the PHP file instead:

behavior: url(PIE.php);

Discussion courtesy of: Hieren feb

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.

PIE does not render border-radius and box-shadow in IE9 since IE9 supports both of those natively. So their presence is not an indication that PIE is working.

My guess is actually that your PIE.htc is being served with the incorrect content-type header -- IE9 is particularly strict about the content-type. See
http:// css3
pie.com/documentation/known-issues/#content-type

for details.

Discussion courtesy of: lojjic

I was having a big headache because even with the correct content-type header (text/x-component), the linear-gradient wasn't working on IE9.

Upgrading to PIE 2.0 solved the issue.


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

Discussion courtesy of: alancasagrande

ie9-gradient-fix.htc worked for me in I.E. 9 but then again changing behavior from pie.htc to pie.php ALSO does the same thing.

The wheels turn oh so slowly at Microsoft but it appears they might also turn in opposite directions?

Discussion courtesy of: Stormin Des

In my case i was using
, changing it to
fixed my problem (of not actualy including my IE css file).

I think**
would do the same logic.

filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#88222222', EndColorStr='#00222222', GradientType=0);

PS. I am not using css3
pie whatsoever (I thought I was, derp)

Discussion courtesy of: ThorSummoner

This recipe can be found in it's original form on Stack Over Flow
.

CSS3 Recipes

责编内容by:CSS3 Recipes (源链)。感谢您的支持!

您可能感兴趣的

Why is the last element in my CSS3 box-sizing too ... LIVE EXAMPLE So I'm using Chris Coyier's CSS3 box-sizing grid setup ...
Side-channel attacking browsers through CSS3 featu... With the staggering amount of features that were introduced through HTML5 and CSS3 the attack su...
Performant CSS3 full-screen slider When implementing a lightbox or image slider, my usual approach is to nest an element containing th...
Web Animations API与动态特性动画实现 byzhangxinxu from http://www.zhangxinxu.com/wordpress/?p=7438 本文可全文转载,但需得到原作者书面许可,同时保留原作者和出处,摘要引...
Using CSS3 PIE for Gradient effect in IE8 I am using CSS3 PIE to generate gradient background for a div. ...