Javascript. Прозрачность PNG в IE6. PNG fix,

21.01.2011

По этому поводу написано множество статей, поэтому данная есть просто заметка в записную книжку.
Известно, то ie вплоть до 7 версии не поддерживают прозрачность PNG изображения.  Это происходит из-за того, что осел (internet explorer) не поддерживает альфа канал PNG-24.
На практике ie6 заменяет прозрачные места в png изображении на серый фон. Смотрится довольно мерзко.

Как правило, я забиваю на внешний вид сайта в ie6, когда речь идет о моих проектах. Но что делать, когда заказчик требует корректного отображения сайта, чуть ли не в текстовых браузерах?
Приходится прибегать к различным ухищрениям. Существует несколько решений проблемы прозрачности PNG и internet explorer: применение фильтра AlphaImageLoader в png изображению, замена фона прозрачным gif файлом и другие.
Они реализуются различными способами, в частности применением javascript. Один такой заслуживает особого внимания - DD_belatedPNG Дрю! (ахтунг) Диллера.

Он имеет следующие преимущества по сравнению с остальными:

  • небольшой объем кода
  • прозрачность в картинках (img)
  • 100% кликабильность всей области картинок-ссылок (включая прозрачные участки)
  • использование background-repeat и background-position в фоновых изображениях
  • нет проблем с z-слоями

Равно как и недостатки:

  • скрипт не сработает, если background указан с !important
  • немного замедляет скорость загрузки страницы (но только в ie6 - используйте условную конструкцию при включении скрипта)
  • не обрабатывает динамические блоки. Если блок с PNG был скрыт, а потом проявлен, нужно повторно вызывать скрипт обработки PNG изображений           

Вобщем, почти полная поддержка прозрачности PNG в ie6.
Для использования необходимо скачать и подключить скрипт.

<!--[if IE 6]>
<script src="js/dd_belatedpng.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix('.fix, .png_img');
</script>
<! [endif]-->

Для png изображения указываем класс, например "fix" и передаем его в скрипт.
Основное удобство заключается в том, что можно перечислить несколько классов, которые нужно фиксить.
При наличии некоторых недостатков, данный скрипт имеет неоспоримые преимущества среди аналогов и может сослужить достойную службу в вашей практике.

Сайт проекта

Теги: browser , javascript ,
Категории: javascript , программирование ,
просмотров: 1243

Комментарии

repsak 23.01.2011
Ребят! вы чего... на дворе 2011 год, пора уже избавляться от хаков и фиксов для 6 ослика...
Все дружно ставим заглушку (http://habrahabr.ru/blogs/noie/80319/) и всячески стараемся оградить пользователя от этого браузера!!!

а вообще: http://www.google.ru/search?sourceid=chrome&ie=UTF-8&q=png_behaviour#hl=ru&xhr=t&q=png+behavior&cp=4&pf=p&sclient=psy&newwindow=1&aq=0&aqi=&aql=&oq=png+behavior&pbx=1&fp=9d50503916b05c90 - пользовался года 3...

p.s. поставь

добавить комментарий

Ваше имя: *
Ваш email: *
Ваш сайт:
Комментарий: *
*
Получать комментарии на email

Популярные

10 причин, чтобы отказаться от алкоголя и одна – чтобы употреблять алкоголь

Комментариев: 60 | просмотров: 13809
01.09.2009

50 фильмов, которые стоит посмотреть

Комментариев: 18 | просмотров: 46470
16.07.2009

Русский образ жизни

Комментариев: 15 | просмотров: 1211
22.03.2010

О вреде микроволновой печи

Комментариев: 10 | просмотров: 5891
13.12.2009

Весело, весело встретим Новый GOD

Комментариев: 9 | просмотров: 3063
17.12.2009

Пропал контакт лист в qip

Комментариев: 9 | просмотров: 2728
04.06.2010

Масонская символика на долларе

Комментариев: 8 | просмотров: 10129
03.03.2009

Категории

Календарь

ПнВтСрЧтПнСбВс
1
21345678
9101112131415
16171819202122
23242526272829
3031

Цитаты

Водка белая, но краснит нос и чернит репутацию

А. П. Чехов