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

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


css internet-explorer-9
person James Alexander    schedule 10.02.2011    source источник

Ответы (3)


arrow_upward
6
arrow_downward

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

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

person Chad Lundgren    schedule 10.02.2011
comment
Даже с последним и лучшим RC? Согласно прозвищу RC, можно ли предположить, что градиенты text-shadow и image не появятся в выпуске? - person James Alexander; 10.02.2011
comment
Обновление: я поиграл с IE9 RC1, и он не поддерживает градиенты CSS3. Он по-прежнему поддерживает проприетарный синтаксис градиента MS, но он очень прост и не может иметь только начальный и конечный цвета, поэтому в моей книге они не эквивалентны. Он также игнорирует text-shadow. Кто-то спросил об этом в твиттере IE9, и ответ был довольно расплывчатым и ни к чему не обязывающим. Лучший URL-адрес для отслеживания всех изменений IE9: msdn.microsoft.com/en -us/ie/ff468705 - person Chad Lundgren; 11.02.2011
comment
Спасибо Чад! Я подозревал, что для этого не было простой поддержки. - person James Alexander; 12.02.2011
comment
Текстовая тень была доступна в IE, по крайней мере, с IE6, хотя для этого требуется javascript или очень нестандартный CSS в более новых версиях. См. whattheheadsaid.com/2011/05/< /а> - person fabspro; 19.07.2012

arrow_upward
62
arrow_downward

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

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*/
person goksel    schedule 21.04.2011
comment
В IE9 этот фильтр будет (насколько я знаю) переполнять радиус границы (закругленные углы).... - person Oskar Duveborn; 27.07.2012
comment
Как сказал Оскар, решение заключается в переполнении радиуса границы... Ребята, у вас есть какой-нибудь обходной путь, чтобы этого избежать в IE 9? Спасибо - person Ravi; 09.08.2012
comment
пришлось отключить фильтр. переполнение радиуса границы было слишком уродливым. - person courtsimas; 18.09.2012
comment
Как избавиться от сценария ActiveX в IE9? - person crh225; 26.03.2013

arrow_upward
1
arrow_downward

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

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
Использовать нижний регистр шестнадцатеричные значения цвета для лучшего сжатия gzip и четко указать background-color и background-image вместо background, потому что это может привести к ошибкам рендеринга в браузерах без поддержки линейного градиента. В значительной степени скопировано из моего ответа для этот вопрос.

person Volker E.    schedule 14.03.2016