Мамбот корректировки отображения PNG под IE 5+ - Модули и плагины

В связи с достаточно часто поступающими вопросами по поводу некорректного отображения прозрачных PNG-файлов под броузерами Microsoft (Internet Explorer), предлагаю небольшой мамбот, устраняющий эту проблему.

Для использования мамбота надо просто установить его на сайте стандартным образом.

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

Конечно, для решения проблемы PNG есть и другие способы - но почему-то думалось, что для рядового неискушенного пользователя этот будет самым простым... 

а в версии Internet Explorer 6 PNG будет корректно отображаться?

Нет в ИЕ6 такие же проблемы

а ещё слышал что ни один мамбот не может в ИЕ показывать PNG который является ссылкой

Я имел ввиду с помощью данного мамбота

Так на png которые являются кнопками или ссылками он не действует?
у меня неработает.
Кто подскажет как прозрачность для кнопки формы реализовать.
Я немогу понять как это в css прописать, разных реализаций кода видел много.

Вот например

Думал, пыхтел, пробовал, ругался.

В итоге родилось такое решение:

<i class="png"><img src="image.png" alt="Image"/></i>HTML код чуть больше, чем в предыдущем примере. Сейчас станет понятно почему. Самое главное, как обычно, в CSS:

* html .png
{
    width: expression(this.firstChild.width);
    filter: expression("progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+
            this.firstChild.src+"', sizingMethod='image')");

    background: expression("transparent url("+
            this.firstChild.src.replace(".png", ".gif")+") no-repeat");
    backgr\ound: none !important;
}

* html .png img
{
    behavior: expression(this.style.visibility="hidden");
}Теперь по порядку:

Используем * html, чтобы стили применялись только в MSIE6-.

Задаём width, ибо AlphaImageLoader работает только если заданы размеры блока. Причём ширину блоку задаём равной картинке, которая лежит внутри этого блока (this.firstChild.width). Ещё вместо ширины можно задать position: absolute или float: left/right.

filter'ом загружаем PNG, беря src из картинки. Это работает в MSIE-5.5+

Для MSIE-5.0, который не понимает AlphaImageLoader, задаём background, заменяя в имени картинки .png на .gif. Т.о. для MSIE-5.0 надо иметь вторую картинку с обычной прозрачностью, лежащую рядом с полупрозрачным PNG.

Скидываем background для MSIE-5.5+, используя backgr\ound.

А теперь скрываем оригинальную картинку. Причём скрываем её не просто через visibility: hidden, а через expression, чтобы это отработало только при включеных скриптах.

Итак, что получилось:

Нормальные браузеры показывают PNG-24 as is.

MSIE-5.5 и MSIE-6.0 со включеными скриптами и картинками показывают PNG-24 через AlphaImageLoader.

MSIE-5.5 и MSIE-6.0 со включеными скриптами и отключеными картинками показывают PNG-24 через AlphaImageLoader, ибо ему пофигу, что картинки отключены. Это и хорошо!

MSIE-5.5 и MSIE-6.0 с отключеными скриптами показывают картинку на сером фоне. Оно и правильно, чудес не бывает, нет скриптов — нет и компотика.

MSIE-5.0 со включеными скриптами и картинками показывают GIF фоном. Нет полупрозрачности, но это лучше, чем ничего.

MSIE-5.0 со включеными скриптами и отключеными картинками картинку не показывает. Ну, тут ничего не поделаешь.

MSIE-5.0 с отключеными скриптами и включеными картинками показывает картинку на сером фоне.

Не помог мне этот мамбот...

Данный мамбот уже давно неактуален. Не работает он. Я рекомендую использовать намного лучшее решение, работает и в бекграунде.