IE GIF/PNG Прозрачность с JQuery

Question

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

Вот страница вопрос: 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?

Заранее благодарен!

Answer 1

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

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

Answer 2

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

Текущая версия IE не поддерживает проект opacity CSS, поэтому jQuery использует вместо этого Alpha-фильтр. Однако фильтры заставляют элемент быть полностью непрозрачным, поэтому они не работают правильно с прозрачными 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)' 
    }); 

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