Фон rgba с альтернативой фильтра IE: IE9 отображает оба! - PullRequest
Новая
       28

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

15 голосов
/ 28 июня 2011

Я пытаюсь использовать прозрачный фон для div, используя комбинацию CSS3 rgba() и свойства filter в Microsoft, например: 

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 не делает этого, пожалуйста, дайте мне знать.

Ответы [ 5 ]

16 голосов
/ 29 июня 2011

У меня есть хакерский обходной путь, которым я поделился.

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

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, как у меня.

7 голосов
/ 07 декабря 2011

Если вы используете 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; }
6 голосов
/ 15 ноября 2011

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

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

Редактировать:!важно, чтобы он работал во всех местах.

5 голосов
/ 28 июня 2011

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

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

0 голосов
/ 04 февраля 2015

Самый простой и надежный метод фильтрации: совместимость, которую я нашел, использует код 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 - это бесплатно; все, что вам нужно, это время и место на диске (сохраните исходную загрузку, чтобы по истечении срока ее можно было просто переустановить.)

...