Как правильно определить поддержку непрозрачности в браузере? - PullRequest
2 голосов
/ 23 декабря 2008

У меня есть некоторый код JavaScript, который применяет альфа-прозрачность. Перед этим он пытается определить, какой тип прозрачности поддерживает браузер, и сохраняет его в переменной для последующего использования. Вот как выглядит код:

// figure out the browser support for opacity
if (typeof br.backImg.style.opacity != 'undefined') 
    opacityType = 'opacity';
else if (typeof br.backImg.filters == 'object') 
    opacityType = 'filter';
else 
    opacityType = 'none';

Для Firefox и Safari первое условие истинно, для IE7 второе условие истинно, но для IE6 оно падает до последнего условия. Почему IE6 не имеет объекта фильтров? Есть ли лучший способ обнаружить это?

Ответы [ 2 ]

5 голосов
/ 23 декабря 2008

В IE7 это фильтр s , а в IE6 это фильтр.

Код ниже возвращает:

  • 'непрозрачность', если поддерживается style.opacity
  • «фильтр» для MS-фильтра (IE <7) </li>
  • «фильтры» для фильтров MS (IE7)
  • «нет» для всего остального

.

var opacityType=(
  (typeof o.style.opacity !== 'undefined') ? 'opacity' :
  /*@cc_on @if (@_jscript)
    (typeof o.filters === 'object') ? 'filters' :
    (typeof o.filter === 'string') ? 'filter' :
  @end @*/
  'none'
);

@ cc_on , @ if и @ _ jscript используются в условном комментарии , который поддерживает только IE.

Я проверял это на FF3, IE6, IE7, Opera9 и Chrome 1, но не на IE4,5 или 8.

Согласно quirksmode MS изменила CSS с filter на -ms-filter , поэтому я не знаю, какой результат вы получите с IE8.

Согласно mozilla непрозрачность поддерживается начиная с FF 0.9, Opera 9 и Safari 1.2 и filter начиная с IE4.

Мне не нравится анализировать браузер, но иногда это необходимо, и условные комментарии значительно упрощают обработку определенных вещей в IE.

2 голосов
/ 23 декабря 2008

То, что вы понимаете под фильтрами, называется непрозрачностью. Реальные фильтры - это проприетарное расширение IE, которое обеспечивает прозрачность и многое другое для этого браузера.

Попробуйте эту статью для кросс-браузерной прозрачности.

Эквиваленты JS точно такие же, как описано: style.opacity или style.filter. Более вероятная проблема заключается в том, что ваш тип документа является переходным и / или элемент, который вы пытаетесь сделать прозрачным, не имеет магического hasLayout

...