Линейные градиенты в разных браузерах и таб

[Delat]

При помощи сервиса http://www.colorzill...radient-editor/ создал линейный градиент, немного доработал код и сделал то, что хотел:

так отображается в FireFox, а в IE 9.0:

как видите, не то что хотелось бы, причём в последней версии Хрома, граница также видна.

Как исправить? (http://prodpak.ru)

background: white; /* Old browsers */
background: -moz-linear-gradient(top, #F3EEEB, white, white, white, white, white, #F3EEEB); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F3EEEB), color-stop(83%,white), color-stop(100%,#F3EEEB)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #F3EEEB 0%,white 83%,#F3EEEB 100%); /* Chrome10+,Safari5.1+*/
background: -o-linear-gradient(top, #F3EEEB 0%, white 17%, white 83%, #F3EEEB 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #F3EEEB 0%, white 83%, #F3EEEB 100%); /* IE10+ */
background: linear-gradient(to bottom, #F3EEEB 0%,white 17%, white 83%,#F3EEEB 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F3EEEB', endColorstr='white',GradientType=0 ); /* IE6-9 */

[klierik]

background: #f3eeeb;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YzZWVlYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE3JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjMzJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY3JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjgzJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmM2VlZWIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #f3eeeb 0%, #ffffff 17%, #ffffff 33%, #ffffff 50%, #ffffff 67%, #ffffff 83%, #f3eeeb 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f3eeeb), color-stop(17%,#ffffff), color-stop(33%,#ffffff), color-stop(50%,#ffffff), color-stop(67%,#ffffff), color-stop(83%,#ffffff), color-stop(100%,#f3eeeb));
background: -webkit-linear-gradient(top,  #f3eeeb 0%,#ffffff 17%,#ffffff 33%,#ffffff 50%,#ffffff 67%,#ffffff 83%,#f3eeeb 100%);
background: -o-linear-gradient(top,  #f3eeeb 0%,#ffffff 17%,#ffffff 33%,#ffffff 50%,#ffffff 67%,#ffffff 83%,#f3eeeb 100%);
background: -ms-linear-gradient(top,  #f3eeeb 0%,#ffffff 17%,#ffffff 33%,#ffffff 50%,#ffffff 67%,#ffffff 83%,#f3eeeb 100%);
background: linear-gradient(to bottom,  #f3eeeb 0%,#ffffff 17%,#ffffff 33%,#ffffff 50%,#ffffff 67%,#ffffff 83%,#f3eeeb 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3eeeb', endColorstr='#f3eeeb',GradientType=0 );

так же:

Support for full multi-stop gradients with IE9 (using SVG).

Add a "gradient" class to all your elements that have a gradient, and add the following override to your HTML to complete the IE9 support:

<!--[if gte IE 9]>

<style type="text/css">

.gradient {

filter: none;

}

</style>

<![endif]-->

При генерировании градиентся с поддержкой IE9 важно учитывать: http://screencast.com/t/HuZr9q3y

[Delat]

#ffffff 33%,#ffffff 50%,#ffffff 67%

а для чего это? У меня запись короче и вроде тоже работает.

Например:

background: -o-linear-gradient(top, #F3EEEB 0%, white 17%, white 83%, #F3EEEB 100%); /* Opera 11.10+ */

[klierik]

я же только для примера показал.

да и вопрос на в форме записи жж.

а вообще я взял указанный тобой код, вставил в генератор колор-зилла, и подогнал под ИЕ9.

чего он его так его расползнал сказать не могу.

в указанном мною примере для ИЕ9 отвечает строка:

background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YzZWVlYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE3JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjMzJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY3JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjgzJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmM2VlZWIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

а что бы она сработала корректно для этого же селектора требуется добавить

.gradient {
    filter: none;
}

в файл, который будет подлючен только для IE9.

много раз этим пользовался - проблем не возникало.

[Delat]

а что бы она сработала корректно для этого же селектора требуется добавить

.gradient {
filter: none;
}

в файл, который будет подлючен только для IE9.

много раз этим пользовался - проблем не возникало.

честно сказать не пойму.

Я взял и вставил сразу после начала <head> и добавил div

<!--[if gte IE 9]>
<style type="text/css">
div .gradient {
	 filter: none;
	 }
</style>
<![endif]-->

и ещё:

<div class="note gradient">

в классе note прописаны градиенты.

Так правильно? (Если не правильно, то можете написать более понятно? )

Edited May 28, 2013 by Delat

[klierik]

тому селектору, которому применяются градиенты, следует применить правило под ИЕ9.

я же не знаю на какой класс ты его вешаешь.