IE9 поддерживает CSS линейные градиенты? - PullRequest
Новая
       1

IE9 поддерживает CSS линейные градиенты?

26 голосов
/ 10 февраля 2011

В Chrome / Safari и Firefox есть свойства -webkit-gradient и -moz-linear-gradient.Как я могу сделать то же самое с IE9?

Ответы [ 3 ]

62 голосов
/ 21 апреля 2011

Лучшее кросс-браузерное решение - 

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*/
6 голосов
/ 10 февраля 2011

Что ж, IE9 еще не закончен, но, похоже, вам придется использовать SVG. Я не знаю никакой поддержки -ms-градиента или градиента в IE9. Еще одна вещь, которая мне так не хватает - это тень текста.

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

1 голос
/ 14 марта 2016

Лучшим кросс-браузерным решением в отношении IE 9+, которое соответствует стандартам W3C (не приводит к ошибке в CSS validator ), является следующее: 

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 введена нотация префикса поставщика -ms-filter, то есть в соответствии со стандартами, в то же время, устарела проприетарные фильтры.

Не требуется ни префикс -o- вендора, ни -ms- (поскольку IE 10 является первым IE, поддерживающим градиенты и поддерживает синтаксис стандартов W3C) .См. http://caniuse.com/#feat=css-gradients
Предпочитайте значения шестнадцатеричного цвета в нижнем регистре для лучшего сжатия и четко указывайте background-color и background-image вместо background, поскольку это может привести к ошибкам рендеринга в браузерах без поддержки линейного градиента.Сильно скопировано из моего ответа на этот вопрос .

...