В ie9 не работает border-radius после применения градиента ?

[ilyas]

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#848484', endColorstr='#434343', GradientType=0 ); /* IE6-9 */ после этой строчки перестает работать border-radius ? если залить простым фоном без градиента то все нормально, как я понял background: -ms-linear-gradient(top, #848484, #434343); работает только в ie10, можно ли как нибуть заставить работать градиент с border-radius ??

[npofopr]

У вас градиент к бордеру или внутри блока?

Всё должно работать.

[SelenIT]

Есть такая проблема, да. Старые фильтры border-radius игнорируют. 2 угла можно спасти маленькой хитростью: сделать фон сплошной заливкой одного цвета (напр. #848484), а сам градиент сделать переходом из другого цвета в полную прозрачность (напр. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00434343', endColorstr='#FF434343', GradientType=0 ) — первые 2 цифры тут обозначают альфа-канал, 00 — полная прозрачность, FF — полная непрозрачность). Если нужны все углы, единственный известный мне выход — обертка с border-radius и overflow: hidden.

-ms-linear-gradient

Не нужен. IE9 не понимает, IE10 понимает linear-gradient без префикса.

[lexxcode]

обертка с border-radius и overflow: hidden.

svg же.... градиент можно делать на svg

<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
  <linearGradient id="g" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%" stop-color="#848484" stop-opacity="1"/>
    <stop offset="100%" stop-color="#434343" stop-opacity="1"/>
  </linearGradient>
  <rect x="0" y="0" width="1" height="1" fill="url(#g)" />
</svg>

подключить в качестве фона

selector {
  background: url(gradient.svg) #848484;
  background: linear-gradient(#848484, #434343);
}

Это же просто. и большинство браузеров это поймет

[SelenIT]

Логично . Эх, действительно, надо и мне как-то преодолеть предубеждение против SVG...

[ilyas]

обертка с border-radius и overflow: hidden.

svg же.... градиент можно делать на svg

<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
<linearGradient id="g" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#848484" stop-opacity="1"/>
<stop offset="100%" stop-color="#434343" stop-opacity="1"/>
</linearGradient>
<rect x="0" y="0" width="1" height="1" fill="url(#g)" />
</svg>

подключить в качестве фона

selector {
background: url(gradient.svg) #848484;
background: linear-gradient(#848484, #434343);
}

Это же просто. и большинство браузеров это поймет

Этот файл просто в корень положить? этот svg будет применяться во всех браузерах или только в ie9 (в ie 8 такое прокатит?) ? или через условные коменты нужно подключать?

[antonKar]

В IE8 не прокатит.

[lexxcode]

Этот файл просто в корень положить? этот svg будет применяться во всех браузерах или только в ie9 (в ie 8 такое прокатит?) ? или через условные коменты нужно подключать?

Да куда удобно кладите. Все кто поддерживают градиенты на css будет на css, остальным на svg, если уж совсем плохо, как в случае с IE8, то будет деградация на однотонный цвет.

Ну там уже если прям уж так прет, можно через хак добавить фильтр для IE8-, но нужно понимать, что это опасно

[npofopr]

а, например, pie.htc не добавит для ослика градиент разве?

[antonKar]

Добавит.

[lexxcode]

а, например, pie.htc не добавит для ослика градиент разве?

Конечно добавит, в скопе с жуткими тормозами и неимоверными глюками pie - зло

[antonKar]

Пользователи IE8 должны страдать. Так что жуткие тормоза тут не страшны.

А IE9 нормально с PIE уживается.

Глюки, насколько я помню, возможны только если мы будет проходить блоки, к которым применён PIE, через JS. Или если анимацию какую. А так всё норм с ним.

[lexxcode]

нафиг pie для ie9 вообще? O_o

А для IE8 более чем достаточно деградации, и не нужно мучить ни себя ни других

[antonKar]

нафиг pie для ie9 вообще? O_o

Ах да, там же градиенты через SVG можно делать.

[lexxcode]

нафиг pie для ie9 вообще? O_o

Ах да, там же градиенты через SVG можно делать.

отож А для IE8 достаточно и просто однотонного фона И все будут счастливы

Но тем не менее, я говорил, говорю и буду говорить, что пора уже на IE8 вообще забивать. Всем лучей бобра

[antonKar]

пора уже на IE8 вообще забивать.

Да с радостью бы, да только 5% у него, как тут забить-то?

Хотя я тут полазил на сайте PIE, они во второй версии запиливают поддержку многих нужных вещей типа background-size и прочих плюх. Надо будет при случае потестировать.

Edited August 15, 2013 by antonKar

[lexxcode]

Да с радостью бы, да только 5% у него, как тут забить-то?

http://www.liveinter...ml?period=month

IE8 = 2.4%

Хотя я тут полазил на сайте PIE, они во второй версии запиливают поддержку многих нужных вещей типа background-size и прочих плюх. Надо будет при случае потестировать.

Тестировано перетестировано результат один - глюки, тормоза, головняк.

Нужно просто жестко ставить перед фактом, поддержки IE8 нет. А если уж и есть, то не выходя за рамки того, что есть "из коробки"

[antonKar]

У Statcounter IE8 по России за последние 3 месяца 5%.