Полная поддержка формата 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).
Как это использовать
- Сперва подключите скрипт DD_belatedPNG.js (см. пример выше).
- Затем вызовите функцию DD_belatedPNG.fix(), в параметрах которой обязательно укажите CSS селектор (как правило это класс) объектов, которые содержат PNG изображения.
Сам скрипт поддержки PNG Вы можете взять на сайте-источнике.
К сожалению более элегантной и подходящей пилюли, которая бы вылечила IE6 от аллергии к PNG формату я думаю нет и не будет, а вот вылечить или защитить Ваш компьютер от вирусов вполне возможно с помощью антивирус касперского 2008.
Проверил — работает :) Хорош укротитель — ничего неплохого не скажешь :)
Спасибо!!! Все работает)))
Проблема поддержки 32-битной (полной) прозрачности картинки формата PNG в веб-браузере Microsoft
А как же быть когда необходимо создать Rollover?
Фотовая картинка для IE6 прописывается ведь через vmlBg при загрузке страницы.
Есть мысли на этот счет?
Ау-у! Кто здесь :)
Что за Rollover, что за зверь vmlBg? Я не понял вопроса, где преамбула?
Есть проблема в 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}
Спасибо за внимание.
Это не проблема IE или скрипта, это проблема Вашей верстки. Внимательно посмотрите CSS.
поправочка, вот код:
» a href=»http://www.micron-service.ru/remont-kompyuterov.html» id=»repair»>
ремонт компьютеров
</a"
снова не то)
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