Май

PNG fix for IE6 – фиксим ПНГ’шки в ИЕ 6

ie6 Сегодняшняя маленькая заметка будет о том? как же заставить всеми нами любимый Internet Explorer 6 показать прозрачность PNG картинок, бэкграундов и так далее.

По работе мне довелось немного менять дизайна сайта у которого в шапке была не тянущаяся, прозрачная картинка. Долго думая как бы сделать все покрасивее и оставить кросбраузерность, решение было одно: PNG на бэкграунде у «дива» растянутого на всю ширину шапки.

Все бы не плохо, везде хорошо, но вот в вышеупомянутом ИЕ 6 как известно PNG картинка была не прозрачной, а беленькой =)

Нужно было искать PNGfix под его любимого. Все время версталщикам и вебмастерам приходится подстраиваться под «всемогущественный» и стандартизированный Internet Explorer 6.

Перепробовал я около 4-5 таких фиксов найденный в «гугле», но все было не то. То они не так заменяли альфа канал, то не дружили с позиционированиями в стилях, но вот я наткнулся на фикс, который по описанию автора просто идеален и лишен минусов всех остальных аналогичных. Поверив его словам, я тут же внедрил это чудо философского программирования себе в страницу и был приятно удивлен. Все работает и никуда не «едет». Прелесть.

Ну что ж от лирики к делу.

Скачиваем фикс, заливаем его в какую-нибудь папку на на хостинге и подключаем фикс в странице, указав путь к файлу фикса(туда куда положили).

Далее необходимо указать фиксу, что же ему фиксить то. Делается это следующим образом:

<script> /* EXAMPLE */ DD_belatedPNG.fix('.png_bg'); /* string argument can be any CSS selector */ /* .png_bg example is unnecessary */ /* change it to what suits you! */ </script>

Собственно функции DD_belatedPNG.fix(); нужно передать селектор класса или элемент страницы в котором нужно профиксить PNG. Функции можно передать не только единичный и однотипный параметр, но и множество разнотипных.

DD_belatedPNG.fix('.example1, .example2, img');

Думаю пригодится, если не Вам то мне точно. Удачи.

11 коммент. к записи “PNG fix for IE6 – фиксим ПНГ’шки в ИЕ 6”

Mikki 25.05.2009 - 12:29
С ослами постоянные проблемы. Хорошо, что решаемые. Microsoft только и дрыхнет – и днём, и ночью – не могли зафиксить по-нормальному.
Evgeny Morev 22.06.2009 - 21:24
Спасибо Саша.
Вспомнил что у тебя была статья эта и она сейчас очень пригодилась.
поправил большой баг на сайте.
Simbioziz 21.08.2009 - 04:25
У этого фикса выявился 1 минус. У меня есть png баннер и всплывающее меню с png фоном. Она расположенны так, что меню при появлении должно перекрывать баннер. Но после применения фикса оно всегда под баннером. z-index не помог
Аббасов александр 14.10.2009 - 11:33
А меня не сработало. Более того на сайте производителя, все демонстрируемые примеры также не работали в IE6.
Стас 06.11.2009 - 12:47
Этот скрипт – DD_belatedPNG.fix, во многих случаях, непонятным образом ломает верстку в IE.
mario 18.11.2009 - 15:03
а как зделать чтоб он background фиксел
elvencedor 22.03.2010 - 19:33
Спасибо, отличный фикс. Проблема только с пнг-шками которые в дивах с позицией absolute – едут… ((
fortis 15.04.2010 - 13:47
спасибо то что нужно
Анатолий 16.04.2010 - 11:58
Модуль действительно хорош, но после применения данной фиксы, исходный селектор заменяется, на доселе не известный… как я понял функцией addRuler().Вопрос на засыпку после применения как обратится к тегу div?
Если есть соображения буду признателен. ^)
Вадим 28.10.2010 - 01:37
А можно уточнить один момент? У меня изображение являетя фоном .Это прописано в CSS.Его можно пофиксить с помощью этого скрипта?Если да, то как?
Alexandr 30.10.2010 - 10:34
Вадим:
Да можно. Нужно передать функции класс того элемента у которого изображение является фоном. Например если есть

и у него есть фоновое изображение ПНГешка, то функчии следует передать значение класса вот так:

Предварительно подключив скрипт к странице, как описано в статье.