При разработке шаблонов часто приходиться сталкиваться с проблемой использования PNG формата. Проблема заключается в неверном отображении PNG в интернет эксплорере IE 5.5 и 6. В этом обзоре приводятся большинство известных методов и хаков как заставить IE правильно работать с PNG.

Способы решения IE+PNG:

1. С помощью CSS
2. С помощью JavaScrrpt
3. Решение на стороне сарвера

1. Работа PNG графики в IE5.5, 6 с помощью CSS

Решение заключается в использовании для IE фильтра AlphaImageLoader.

1. Вставляем CSS файл fix-ie6.css только для IE5.5 и 6 в разделе head html документа.

2. Помечаем селектором(айдишником или классом) в каком контейнере будет png графика.

3. Описываем в общем файле стилей, например в styles.css, свойства контейнера #png_wrap.

4. Прописываем в файле fix-ie6.css фон для этого контейнера с использованием фильтра AlphaImageLoader

5. Если нужно добавить кликабельность контейнера, можно внутрь контейнера поместить прозрачный гиф внутри ссылки. Например:

Недостатки решения AlphaImageLoader:

- Необходим дополнительный контейнер для каждой картинки.

Преимущества решения AlphaImageLoader:

+ Простота использования
+ Валидный код

Подробная информация про свойства фильтра AlphaImageLoader

2. Работа c PNG графикой в IE5.5, 6 используя JavaScript библиотеки

Существует огромное количество библиотек JavaScript для борьбы с проблемой IE и PNG. Они загружаются при полной загрузке страницы и обрабатывают png графику. Каким образом изменяют графику – это уже вопрос другого обзора. Теперь рассмотрим наиболее интересные варианты:

jquery.pngFix.js – плагин на основе API jQuery

Свойства плагина jquery.pngFix.js

• Работает с фоновыми изображениями
• Работает с кликабельными изображениями
• Работает с атрибутами alt, title, styles и class изображения

Установка:

1. Скачать jQuery
2. Скачать pngFix
3. Подключить в заголовке head скаченные файлы
   <script type="text/javascript" src="jquery-latest.pack.js"></script>
   <script type="text/javascript" src="jquery.pngFix.js"></script>
4. Активировать плагин pngFix. Вставлять можно и в заголовок head и в тело страницы body
   <script type="text/javascript">
       $(document).ready(function(){
           $(document).pngFix();
       });
   </script>

Недостатки jquery.pngFix.js

- Не всегда корректно позиционируется в IE
- забирает себе событие document.ready

Преимущества jquery.pngFix.js

+ легек в использовании и установке
+ с помощью селекторов в jQuery плагину можно указать чтоб он обрабатывал только картинки

ie7-js – Google JavaScript библиотека

Свойства плагина jquery.pngFix.js

• Работает только с изображениями
• Работает с кликабельными изображениями
• Работает с изображениями, которые имеют вид *-trans.png

Установка:

1. Скачать Google ie7-js
2. Подключить в заголовке head скаченный файл
   <!--[if lt IE 7]>
     <script src="IE7.js" type="text/javascript"></script>
   <![endif]-->
3. Переименовать необходимые файлы в такой вид *-trans.png

Недостатки jie7-js Google

- большой размер (72 Кб)
- не работает с повторяющимся фоновым изображением

Преимущества jie7-js Google

+ очень прост в установке

IE PNG Alpha Fix

Свойства библиотеки IE PNG Alpha Fix

• Автоматическая активация прозрачности
• Работает с картинками
• Работает с фоновыми изображениями
• Поддерживает ролловеры
• Работает на основе .htc файла
• вставляет если нужно ссылку для кликабельности

Установка IE PNG Alpha Fix

1. Скачиваем и разархивируем архив iepngfix.zip
2. Копируем iepngfix.htc в любое место
3. Прозрачный gif из архива копируем в корень сайта. Если же копируем в какую-то папку /folder/ , тогда в файле iepngfix.htc нужно указать путь к прозрачному гифу
    var blankImg = '/folder/blank.gif';
4. Указываем или в css или в html, какие контейнеры буду содержать png графику. Путь должен быть относительным к html фалу.
   <style type="text/css">
     img, div { behavior: url(folder2/iepngfix.htc); }
   </style>

Недостатки IE PNG Alpha Fix

- работает на основе .htc

Преимущества IE PNG Alpha Fix

+ прост в установке и использовании
+ широкие возможности

3. Cерверные решения проблемы IE+PNG

Вся обработка страници по замене png записей происходит на стороне сервера с помощью php или другого языка. Примеров много. Вот одни из них:

replacePngTags.php от koivi.com

Установка

1. Скачиваем архив http://koivi.com/ie-png-transparency.zip
2. Копируем на сервер replacePngTags.php
3. В файле в котором нужно работать с png графикой вставляем инициализируем функцию
   <?php ob_start(); ?>
4. В конце этого файла вставляем такой код:
   <?php
       include_once 'replacePngTags.php';
       echo replacePngTags(ob_get_clean());
   ?>

Недостатки replacePngTags.php

- нагрузка на сервер

Преимущества replacePngTags.php

+ не нужно править html код, только добавить подключение функции в движок

Существует еще очень большое количество решений проблемы IE6 и PNG, но они уже являются вариациями и улучшениями сдесь перечисленных.