使用-ms的IE9渐变

Question

Anyone know how I can make this work in IE9. The top one works great in firefox but when I add the second one for IE9 it doesn't work. Any ideas what I'm doing wrong.

    background: -moz-linear-gradient(top,  rgba(117,117,117,1) 0%, rgba(111,111,111,1) 5%, rgba(102,102,102,1) 11%, rgba(39,39,39,1) 42%, rgba(28,28,28,1) 50%, rgba(0,0,0,1) 53%, rgba(0,0,0,1) 100%); /* FF3.6+ */

    background: -ms-linear-gradient(top left, rgba(117,117,117,1) 0%, rgba(117,117,117,1) 5%,rgba(102,102,102,1) 11%, rgba(39,39,39,1) 42%, rgba(28,28,28,1) 50%, rgba(0,0,0,1) 53%, rgba(0,0,0,1) 100%);

I don't want to use PIE.

Answer 1

Try this out - Ultimate CSS Graident Generator

Click the "IE9 Support" checkbox in the bottom right of the page.

Answer 2

IE9 doesn't support gradients - only IE10: http://caniuse.com/#search=gradient

Instead, I'd recommend using something like this to speed up coding in IE: http://www.bradshawenterprises.com/blog/2010/dynamically-drawing-gradients-with-php/

I usually use this to generate a png of the gradient for me, then set that as the background first, then have another property after with the CSS grad. This lets it work in all older browsers that don't support gradients, not just IE.

It also meant that when the spec changed, my sites still worked.

Alternatively, use http://css3pie.com/ , though I don't really like it for grads.

Answer 3

As stated in the other answers, the -ms prefix is for IE10+. IE9 drops support for the older filter syntax as well, so you can't actually render any gradients with pure CSS.

One solution to this is use SVG gradients for the background-image property. http://css3wizardry.com/2010/10/29/css-gradients-for-ie9/