Градиент, IE9

[GodNob]

Привет!

Сегодня заметил такую вещь - задаю фон дива градиентом, все нормально. Добавил скругление углов - и фон вылез за рамки самого дива.

Вот пример

Какое решение может быть для IE9 ? В остальных браузерах все нормально

[lexxcode]

Например так можно обойтись http://jsfiddle.net/alexriz/YLDPa/32/

[GodNob]

alexriz, можете объяснить, как Вы это сделали?

[lexxcode]

в http://www.colorzilla.com/gradient-editor/ отмечаете IE9 как на скрине

У вас получится код с захешированной svg картинкой (в примере здесь не весь хеш для экономии места)

background: #1e5799;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIi....);
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8));
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );

Далее берете вставляете в свой css. У фильтра ставите *(звездочка)

*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );

тем самым ограничивая применение только для IE6-7

Далее для включения в IE8 в конец своего css добавляете хак для IE8

@media \0screen {

}

И уже вовнутрь этого хака вставляете ваш селектор и туда же фильтр, только уже без звездочки

@media \0screen {
    .someClass {
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
    }
}

В итоге для старых ИЕ будет филтр, а для ИЕ9 будет SVG которая благополучно скругляется.

[GodNob]

2ю галочку для IE не заметил

Спасибо, очень помогли!