IE GIF / PNG прозрачность проблема с jQuery - PullRequest
Новая
       4

IE GIF / PNG прозрачность проблема с jQuery

1 голос
/ 14 апреля 2010

Хорошо, это довольно странно ...

Вот эта страница вопроса: http://s289116086.onlinehome.us/lawjournaltv/index.php

Основной синий фон выноски изначально был PNG, но когда я применил к нему некоторую хитрость jQuery (щелкните цифры в правом верхнем углу, чтобы увидеть, что я имею в виду), появилась прозрачная белая рамка там, где должна быть прозрачность. Смотрите этот скриншот из IE8: http://skitch.com/darkdriving/n62bu/windows-xp-professional

Я подумал, что могу пожертвовать качеством / гибкостью PNG, и просто сохранил каждый фон в формате GIF и установил матовый цвет на белый (пока). Что ж, я ошибся, потому что IE рассматривает прозрачность GIF так же, как и исходные PNG.

Я читал здесь, что проблема с PNG, Javascript и IE как-то связана с несколькими фильтрами, которые нельзя применить к одному изображению, но не должны ли GIF-файлы быть освобождены от этого, поскольку в них отсутствует альфа-канал? Есть ли способ сделать эту страницу похожей в IE на браузеры Firefox или Webkit?

Заранее спасибо!

Ответы [ 2 ]

4 голосов
/ 14 апреля 2010

Это ошибка в IE.

Текущая версия IE не поддерживает opacity CSS proeprty, поэтому вместо этого jQuery использует альфа-фильтр. Однако фильтры заставляют элемент быть полностью непрозрачным, поэтому они не работают правильно с прозрачными PNG.

Чтобы использовать прозрачные PNG в полупрозрачных элементах, необходимо применять PNG с использованием фильтра AlphaImageLoader (даже в IE8). Например: 

if ($.browser.msie)
    $(something).css({
        background: 'none',
        filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/Folder/Image.png", sizingMethod="scale"),alpha(opacity=100)'
    });

(Этот код работает; сейчас я его использую)

1 голос
/ 02 июня 2010

Я в основном решил эту проблему, загружая различный набор изображений (используя PHP) при каждом обновлении страницы. Это не так динамично, но мои попытки использовать уродливые, запатентованные фильтры CSS или другие плагины на основе JavaScript были безрезультатными. На мой взгляд, это, безусловно, одна из самых больших ошибок, с которыми я столкнулся за время, проведенное за взломом IE. На самом деле, я удивлен, что это заняло у меня много времени.

В этом случае слово мудрому: попробуйте сделать прозрачные изображения сплошным цветом или пострадайте от последствий в IE.

...