Ie не поддержал градиент кнопки

[eleonore]

Делаю кнопку с градиентом,казалось бы просто,но опера градиент не отображает!я так поняла у оперы проблемы с градиентом,но и IE 9 градиент не отобразил,хотя я вставила фильтр специально для IE. Во всех остальных браузерах проблем с отображением градиента у меня не возникло в данном примере.Что я делаю не так,подскажите,пожалуйста. Мой код здесь http://jsfiddle.net/eleonore/faVkX/

[kamaz6141]

background: rgb(252,177,250);
background: -moz-linear-gradient(top,  rgba(252,177,250,1) 0%, rgba(254,226,251,1) 50%, rgba(252,177,250,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,177,250,1)), color-stop(50%,rgba(254,226,251,1)), color-stop(100%,rgba(252,177,250,1)));
background: -webkit-linear-gradient(top,  rgba(252,177,250,1) 0%,rgba(254,226,251,1) 50%,rgba(252,177,250,1) 100%);
background: -o-linear-gradient(top,  rgba(252,177,250,1) 0%,rgba(254,226,251,1) 50%,rgba(252,177,250,1) 100%);
background: -ms-linear-gradient(top,  rgba(252,177,250,1) 0%,rgba(254,226,251,1) 50%,rgba(252,177,250,1) 100%);
background: linear-gradient(to bottom,  rgba(252,177,250,1) 0%,rgba(254,226,251,1) 50%,rgba(252,177,250,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcb1fa', endColorstr='#fcb1fa',GradientType=0 );

[Viper]

но опера градиент не отображает!я так поняла у оперы проблемы с градиентом

Для работы градиента в Опере, для нее необходима своя запись с префиксом -o-, как и для FF(-moz-) и Chrome/Safari(-webkit-), например:

background: -o-linear-gradient(top, #FCB1FA 0%,#FEE2FB 49%,#FCB1FA 100%); 

IE 9 градиент не отобразил,хотя я вставила фильтр специально для IE

Фильтры в ИЕ не поддерживают, насколько я знаю, сложные градиентные заливки, как у тебя. Для них можно указать, если я не ошибаюсь, только 2 цвета. У меня ИЕ отображает твой градиент как и должен(как ты и указала) в 2-х цветах.

П.С. Советую пользоваться Gradient Generator'ами, например, этим - _http://www.colorzilla.com/gradient-editor/ Разве-что, правило для /* Chrome,Safari4+ */ считаю лишним. Уже не вижу в нем необходимости.

[eleonore]

но опера градиент не отображает!я так поняла у оперы проблемы с градиентом

Для работы градиента в Опере, для нее необходима своя запись с префиксом -o-, как и для FF(-moz-) и Chrome/Safari(-webkit-), например:

background: -o-linear-gradient(top, #FCB1FA 0%,#FEE2FB 49%,#FCB1FA 100%); 

IE 9 градиент не отобразил,хотя я вставила фильтр специально для IE

Фильтры в ИЕ не поддерживают, насколько я знаю, сложные градиентные заливки, как у тебя. Для них можно указать, если я не ошибаюсь, только 2 цвета. У меня ИЕ отображает твой градиент как и должен(как ты и указала) в 2-х цветах.

П.С. Советую пользоваться Gradient Generator'ами, например, этим - _http://www.colorzilla.com/gradient-editor/ Разве-что, правило для /* Chrome,Safari4+ */ считаю лишним. Уже не вижу в нем необходимости.

Спасибо!с оперой разобралась,все получилось. Странно,что у меня в IE не отображается градиент,а у тебя работает...

Я о ресурсе http://www.colorzilla.com/gradient-editor/ знала,но мне кажется, он дает много лишнего в коде...или я не права?может лучше,когда код такой исчерпывающий.меньше будет проблем.

Edited December 9, 2012 by eleonore

[npofopr]

а я для градиента пользуюсь PIE.htc

А из сгенерированного через colorzilla убираю галочку поддержки IE9 и удаляю filter для старых.

[SelenIT]

Из того, что дает Colorzilla, точно не нужен -ms-linear-gradient (релиз IE10 понимает беспрефиксный стандартный вариант). Лично я еще не вижу смысла в двух отдельных строчках для вебкитов, но тут уже решайте сами

[eleonore]

Из того, что дает Colorzilla, точно не нужен -ms-linear-gradient (релиз IE10 понимает беспрефиксный стандартный вариант). Лично я еще не вижу смысла в двух отдельных строчках для вебкитов, но тут уже решайте сами

Спасибо,полезная информация

а я для градиента пользуюсь PIE.htc

А из сгенерированного через colorzilla убираю галочку поддержки IE9 и удаляю filter для старых.

А зачем убирать галочку IE9? думаю не так мало людей пользуются стандартным браузером.

[eleonore]

Cкажите,а что это за безумный код,который выдает colorzilla после /* IE9 SVG, needs conditional override of 'filter' to 'none' */??вот такой:

background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI2JSIgc3RvcC1jb2xvcj0iIzI5ODlkOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjYwJSIgc3RvcC1jb2xvcj0iIzdkYjllOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk4JSIgc3RvcC1jb2xvcj0iIzIwN2NjYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);

На каком это языке? Без него не работает градиент в IE9.

[npofopr]

Cкажите,а что это за безумный код,который выдает colorzilla после /* IE9 SVG, needs conditional override of 'filter' to 'none' */??вот такой:

background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI2JSIgc3RvcC1jb2xvcj0iIzI5ODlkOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjYwJSIgc3RvcC1jb2xvcj0iIzdkYjllOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk4JSIgc3RvcC1jb2xvcj0iIzIwN2NjYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);

На каком это языке? Без него не работает градиент в IE9.

Вроде так data: URL, ну и просто поищите по такому запросу)

А вы добавляли 'filter' to 'none'?

[eleonore]

Cкажите,а что это за безумный код,который выдает colorzilla после /* IE9 SVG, needs conditional override of 'filter' to 'none' */??вот такой:

background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI2JSIgc3RvcC1jb2xvcj0iIzI5ODlkOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjYwJSIgc3RvcC1jb2xvcj0iIzdkYjllOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk4JSIgc3RvcC1jb2xvcj0iIzIwN2NjYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);

На каком это языке? Без него не работает градиент в IE9.

Вроде так data: URL, ну и просто поищите по такому запросу)

А вы добавляли 'filter' to 'none'?

Разобралась.Все везде работает.Все спасибо за помощь!:-)