Linear gradient using CSS3 PIE in IE9 doesn't work, IE8 does

Question

I decided to completely abandon support for IE6 and IE7 on my website, redirecting it to the warning text page. However, I still support IE8 and IE9.

I achieve this with CSS3 PIE and the border radius works in both (IE8 / 9) and tags, but I also rely on a linear gradient. For this, I have a bunch of labels:

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, weird. I tried any solutions that I found, but they did not work. IE8 just shows the backup: background: # E6E6E6; - not a gradient.

I don’t think that something is wrong with the server or something like that, because other properties - border-radius and box-shadow - work with PIE, but not without.

I have all the properties to work in all supported browsers - just not IE9 :(

Any ideas? Thanks

Answer 1

Ok, here is my fix. This, of course, is not very, 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]--> 

EDIT: if someone wants them, PIE.htc is at http://www.css3pie.com and ie9-gradient-fix.htc is at http://abouthalf.com/examples/ie9roundedbackgrounds/htc.zip . I could not get ie9-gradient-fix.htc to work if it was not in the root directory, PIE.htc worked in the / resources / directory.

Answer 2

I don’t think that something is wrong with the server or something like that, because other properties - border-radius and box-shadow - work with PIE, but not without.

PIE does not display border-radius and box-shadow in IE9, since IE9 supports both natively. Therefore, their presence is not an indication that the PIE is working.

My guess is that your PIE.htc is being served with the wrong content type header. IE9 is especially strict about the content type. See http://css3pie.com/documentation/known-issues/#content-type for details.

Answer 3

I had a big headache because even with the right content header (text / x-component) the linear gradient did not work on IE9.

Upgrading to PIE 2.0 solved the problem.

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

Answer 4

Fine! I used PIE.php and fixed this error (linear gradient + border radius) in IE8, IE9!

To use it, just make sure that both PIE.php and PIE.htc are in the same directory, and then in your CSS indicate the behavior of the PHP file:

behavior: url (PIE.php);

Answer 5

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

The wheels rotate slowly at Microsoft, but it looks like they can also rotate in opposite directions?

Answer 6

In my case, I used <!--[if lt IE 9]> , changing it to <!--[if lt IE 10]> , fixed my problem (not relevant, including my css IE file).

I think ** <!--[if lte IE 9]> will follow the same logic.

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

PS. I don't use css3pie at all (I thought I was, derp)