расставляй правильно приоритеты и не отвлекайся на мелочи

Полная поддержка формата PNG в IE 6

Хочу рекомендовать Вам отличный ресурс укротителя Internet Explorer’а и его решение извечной проблемы полной поддержки PNG формата для IE6. Как раз сегодня вышла улучшенная, обновленная версия этой реализации.

Ниже будет идти вольный перевод с оригинала.

Что работает и каковы особенности

  • Вы можете полноценно использовать 24-битные PNG изображения с прозрачностью в качестве фона (background-image) для Internet Explorer 6
  • Вы получаете поддержку работоспособности параметров background-position и background-repeat
  • Решение не использует AlphaImageLoader и поэтому корректно работает с z-индексом
  • Работает поддержка Javascript назначений для element.style и псевдокласса :hover
  • Размер скрипт файла ~7.5KB в обычном виде и ~6KB в сжатом
  • Легкость реализации:
    <!--[if IE 6]>
    <script src='DD_belatedPNG.js' type='text/javascript' />
    <script type='text/javascript'>
        DD_belatedPNG.fix('.png_bg'); //EXAMPLE
    </script>
    <!--[endif]-->
    

Что не работает

  • Нельзя использовать ‘body’ как CSS селектор аргумента в функции fix()
  • Еще не готова реализация для background-position: fixed;

Как это работает

Скрипт эксплуатирует язык Microsoft VML, в котором реализована поддержка PNG формата. Он обходит все элементы согласно заданного CSS селектора и собирает данные об их размерности и стилистике. Выполнив такую сборку он формирует соответствующие VML <DD_belatedPNG:rect/> ноды для каждого из элементов и применяет их к элементам через (element.insertBefore).

Как это использовать

  1. Сперва подключите скрипт DD_belatedPNG.js (см. пример выше).
  2. Затем вызовите функцию DD_belatedPNG.fix(), в параметрах которой обязательно укажите CSS селектор (как правило это класс) объектов, которые содержат PNG изображения.

Сам скрипт поддержки PNG Вы можете взять на сайте-источнике.

К сожалению более элегантной и подходящей пилюли, которая бы вылечила IE6 от аллергии к PNG формату я думаю нет и не будет, а вот вылечить или защитить Ваш компьютер от вирусов вполне возможно с помощью антивирус касперского 2008.

Почитать еще по данной теме :
9 комментариев на статью:
  1. Kastoff Alex:

    Проверил — работает :) Хорош укротитель — ничего неплохого не скажешь :)

  2. risa:

    Спасибо!!! Все работает)))

  3. Андрей:

    Проблема поддержки 32-битной (полной) прозрачности картинки формата PNG в веб-браузере Microsoft

  4. andre:

    А как же быть когда необходимо создать Rollover?
    Фотовая картинка для IE6 прописывается ведь через vmlBg при загрузке страницы.
    Есть мысли на этот счет?

  5. admin:

    Ау-у! Кто здесь :)
    Что за Rollover, что за зверь vmlBg? Я не понял вопроса, где преамбула?

  6. Maxim:

    Есть проблема в IE6. Не меняется фон у слоя.
    http://www.micron-service.ru
    Есть кнопки, которые должны изменять свой вид, при наведении на них курсора. Без скрипта всё работает, кроме прозрачности)
    С подключением скрипта, кнопки без наведения отображаются как и должны, но при наведении размеры кнопки увеличиваются, а фоновый рисунок остается старым. Создаётся впечатление, что кнопка взорвалась)
    код:

    ремонт компьютеров

    css:

    a:hover .but_l{width:11px;background:url(../images/left+.png) 0 0 no-repeat}
    a:hover .but_c{background:url(../images/center+.png) 0 0 repeat-x;}
    a:hover .but_r{width:11px;background:url(../images/right+.png) 0 0 no-repeat}

    .but_l{width:7px;background:url(../images/left.png) 0 0 no-repeat}
    .but_c{margin:0;background:url(../images/center.png) 0 0 repeat-x;}
    .but_r{width:7px;background:url(../images/right.png) 0 0 no-repeat}

    Спасибо за внимание.

  7. Maxim:

    поправочка, вот код:

    » a href=»http://www.micron-service.ru/remont-kompyuterov.html» id=»repair»>

    ремонт компьютеров

    </a"

  8. Maxim:

    снова не то)
    a href=»http://www.micron-service.ru/remont-kompyuterov.html» id=»repair»
    span class=»but_l»></span
    span class=»but_c»>ремонт компьютеров</span
    span class=»but_r»></span
    </a

Ответить
Обязательные поля помечены *