Rgba background с альтернативой фильтра IE: IE9 отображает оба!

Я пытаюсь использовать make div, прозрачно используя смесь свойств CSS3 rgba() и microsoft filter, как это:

div {
    width: 200px;
    height: 200px;
    /* blue, 50% alpha */
    background: rgba(0,0,255,0.5);
    /* red, 50% alpha */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFF0000,endColorstr=#7FFF0000);
}

Как и ожидалось, браузеры, поддерживающие rgba(), будут отображать div как синий, тогда как IE 6-8 сделает его красным.

IE9, по-видимому, может обрабатывать оба (ранее я думал, что поддержка filter была удалена), а результат - div фиолетовый. Есть ли способ сделать IE9 поддержкой любого из этих свойств, но не другого? rgba(), очевидно, было бы предпочтительным.

N.B. Я использую IETester для запуска этих тестов. Если правильная сборка IE9 этого не делает, сообщите мне.

Ответы

Ответ 1

Я придумал хакерское обходное решение, которое, как я думал, я поделюсь.

IE9 и выше поддерживают псевдо-селектор :not() CSS. Используя атрибут, который не существует в элементе, мы можем заставить IE9 отключить его filter gradient:

div {
    width: 200px;
    height: 200px;

    /* For FF, Chome, Opera, IE9+ */
    background: rgba(0,0,255,0.5);

    /* For IE6-9 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFF0000,endColorstr=#7FFF0000);
}

div:not([dummy]) {
    /* IE9 only */
    filter: progid:DXImageTransform.Microsoft.gradient(enabled='false');
}

В итоге я использовал это, потому что мой прозрачный div только один раз. Он также казался немного аккуратным, сохраняя вещи в CSS, вместо того, чтобы использовать условные комментарии в HTML.

Изменить: В поддержку других ответов я нашел эту статью из команды разработчиков Microsoft, которая поощряет разработчиков к используйте условные комментарии, а не обходные методы CSS, подобные моим.

Ответ 2

Если вы используете HTML5, вы можете пойти по пути использования

<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="ie6 oldie"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="ie7 oldie"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="ie8 oldie"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en" class="gtie9 modern">
<!--<![endif]-->

и в вашем CSS используйте что-то вроде:

.ie9 .element {filter: none; }

Ответ 3

Это работает для меня (не полностью протестировано во всех версиях). Согласно обсуждениям в этом блоге: селектор root доступен только в IE9, и, таким образом, приведенный ниже код можно записать, чтобы удалить все настройки фильтра в IE9.

:root *
{
    filter: progid:DXImageTransform.Microsoft.gradient(enabled='false') !important;
}

Изменить:! важно, чтобы убедиться, что он работает во всех местах.

Ответ 4

Взгляните на таргетинг на браузер/версию, используя условные комментарии. Вы хотите настроить таргетинг на определенные версии IE и реализовать свой стиль для каждой версии.

http://www.positioniseverything.net/articles/cc-plus.html

Ответ 5

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

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

Затем вы добавляете класс gradient CSS к элементу, который в нем нуждается. И что это.

Хотя условные комментарии все еще немного взломаны, по-моему, они меньше, чем универсальные селекторные или подобные: нет и не имеют рисков для производительности.

Помните, что Microsoft отказала условным комментариям от IE10 и выше, но вы почти никогда не нуждаетесь в них для этих версий.

Я тоже не буду доверять IETester; загрузить виртуальную машину с соответствующим IE9 из https://www.modern.ie/en-gb - бесплатно; все, что вам нужно, - это время и пространство на диске (сохраните исходную загрузку, поэтому, когда она истечет, вы можете просто переустановить.)