Does IE9 support CSS linear gradients?

问题

With Chrome/Safari and Firefox there's the -webkit-gradient and -moz-linear-gradient properties. How can I do this same sort of thing with IE9?

回答1:

Well, IE9 is not done yet, but so far it looks like you're going to have to use SVG. I'm not aware of any -ms-gradient or gradient support in IE9. The other thing that's missing so far that I'm annoyed about is text-shadow.

http://css3wizardry.com/2010/10/29/css-gradients-for-ie9/

回答2:

The best cross-browser solution is

background: #fff;
background: -moz-linear-gradient(#fff, #000);
background: -webkit-linear-gradient(#fff, #000);
background: -o-linear-gradient(#fff, #000);
background: -ms-linear-gradient(#fff, #000);/*For IE10*/
background: linear-gradient(#fff, #000);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');/*For IE7-8-9*/ 
height: 1%;/*For IE7*/

回答3:

The best cross-browser solution regarding IE 9+, that is conforming to W3C standards (doesn't result in an error in CSS validator) is the following:

background-color: #fff; /* Browsers without linear-gradient support */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #000)); /* Chrome, Safari 4+ */
background-image: -webkit-linear-gradient(#fff 0%, #000 100%); /* Chrome 10+, Safari 5.1+ */    
background-image:    -moz-linear-gradient(#fff 0%, #000 100%); /* Fx 3.6+ */   
background-image:         linear-gradient(#fff 0%, #000 100%); /* W3C */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#ffffff', endColorstr='#000000')";

.gradient--test { 
    background-color: #fff; /* Browsers without linear-gradient support */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #000)); /* Chrome, Safari 4+ */
    background-image: -webkit-linear-gradient(#fff 0%, #000 100%); /* Chrome 10+, Safari 5.1+ */    
    background-image:    -moz-linear-gradient(#fff 0%, #000 100%); /* Fx 3.6+ */   
    background-image:         linear-gradient(#fff 0%, #000 100%); /* W3C */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#ffffff', endColorstr='#000000')";
}
.gradient--test {
  width: 61.8%;
  height: 200px;
 }

<div class=gradient--test></div>

IE 9 introduced the vendor prefix -ms-filter notation, that is according to standards, at the same time deprecated the proprietary filters.

Neither -o- vendor prefix is necessary, nor -ms- (as IE 10 is the first IE to support gradients and it does support the W3C standards syntax). See http://caniuse.com/#feat=css-gradients
Prefer lowercase hex color values for better gzipping, and clearly state background-color and background-image instead of background, because it could result in rendering errors in browsers without linear gradient support. Largely copied from my answer for this question.

来源：https://stackoverflow.com/questions/4961651/does-ie9-support-css-linear-gradients

标签

css3

internet-explorer-9