Поддерживает ли IE9 линейные gradleиенты CSS?
В Chrome / Safari и Firefox есть -webkit-gradient и -moz-linear-gradient . Как я могу сделать то же самое с IE9?
- css3 text-shadow в IE9
- HTML5 doctype ставит IE9 в режим причуд?
- Как открыть пустое новое окно в IE9 вместо копии текущего окна?
- Как заставить IE открывать JavaScript как текст
- Internet Explorer 9 Drag and Drop (DnD)
- Как отключить защищенный режим в Internet Explorer 9?
- Internet Explorer 9 не правильно отображает ячейки таблицы
- Поддержка видео в IE9 HTML5
Ну, IE9 еще не закончен, но пока похоже, что вам придется использовать SVG. Я не знаю никакой поддержки -ms-gradleиента или gradleиента в IE9. Другая вещь, которая отсутствует до сих пор, что меня раздражает, это текстовая тень.
Лучшее кросс-браузерное решение
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*/
Лучшее кросс-браузерное решение для 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; }