PNG в IE 6

Как известно Internet Explorer 6 и версии ниже неправильно отображают файлы формата PNG 24bit, фон изображения скорее будет отображаться серым. Это конечно же не куда не годится. PNG с альфа-каналами позволяет значительно улучшить внешний вид дизайна сайта.

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

Решение 1

Решение можно найти на официальном сайте Microsoft. Решение заключается в использовании фильтра AlphaImageLoader и добавлении в стиль следующего:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png',
   sizingMethod='scale');

Но меня это решение не устроило. Opera, FireFox и другие популярные браузеры, по всей видимости, не имеют фильтра AlphaImageLoader, и не отображают изображение вообще. А если помимо этого фильтра добавить в стиль Background, то появляются проблемы в IE.

Решение 2

Это решение немножко посложнее и автора этого решения сейчас уже сложно найти.

Итак, нам потребуется прозрачный GIF размером 1?1 px. И файл с кодом pngfix.htc. Скачиваем эти файлы отсюда.

Копируем файл n.gif в директорию с сайтом (куда вам удобнее). Файл pngfix.htc аналогично.

Далее в файле pngfix.htc указываем в строчке

if(typeof blankImg == 'undefined') var blankImg = '/Graph/n.gif';

путь до GIF файла.

Например, на моем сайте нужно было копировать файл в папку public_html. Тоесть скопировать так, чтобы файл был доступен по пути yoursite.ru/pngfix.htc

Далее в стиль, где используется png, пишем:

behavior: url(путь_к_файлу/pngfix.htc);

Если файл в корне сайта, то путь будет только pngfix.htc.

Можно определить класс:

.png{
   behavior: url(путь/к/файлу/pngfix.htc);
}

И использовать его, например, так:

<img src="путь_к_изображению.png" class="png" />

Решение 3

Про еще одно решение, на мой взгляд лучше тех которые я описал выше, читаем в статье «PNG в IE 6»