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

По этому поводу написано множество статей, поэтому данная есть просто заметка в записную книжку.
Известно, то 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" и передаем его в скрипт.
Основное удобство заключается в том, что можно перечислить несколько классов, которые нужно фиксить.
При наличии некоторых недостатков, данный скрипт имеет неоспоримые преимущества среди аналогов и может сослужить достойную службу в вашей практике.

Сайт проекта

Интересное

Отзыв о FirstVDS
При покупке хостинга у FirstVDS мне предложили скидку за годный отзыв в блоге или на форуме....
Project Glass — Очки будущего от Google
Компания Google представила суперсовременные «очки дополненной реальности» или Project Glass. Впрочем,...
Git и Bitbucket
Git – это распределенная система контроля версий. Пожалуй, на этом теория заканчивается, так как...
Проверка сайта на вирусы
Если пользоваться привычной терминологией, то web вирусы не являются вирусами в традиционном...

Комментарии

  • repsak
    23.01.2011 в 15:19

    Ребят! вы чего… на дворе 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. поставь

    ответить

Чтобы оставлять комментарии, авторизируйтесь

Войти через OpenID

рейтинг0+-
Популярные
Точки входа
Наверх