Как сделать прозрачные png картинки в IE6

07/12/2011 Комментариев 0 В разделе Уроки Автор Шведков Илья Просмотров 47

Привет друзья У меня была проблема с прозрачными картинками в IE6 (Internet Explorer 6). Спешу поделиться решением как исправить прозрачность в старых браузерах IE5.5 и IE6.

С проблемой отображения прозрачных картинок в старых версиях браузера (Internet Explorer 5.5 и Internet Explorer 6) я столкнулся совсем не давно. По большому счету IE6 уже никто не пользуется, этот браузер устарел давным-давно.

Так зачем тогда заниматься исправлением отображения прозрачных картинок для устаревшего браузера?

Ниже представлена статистика просмотров сайта в различных браузерах (посещаемость сайтов от 100 до 1000 человек, возраст сайтов от 3 мес до 2 лет): [gallery link="file"] Что же получается - 5-10% посетителей сайта пользуются MSIE6 и видят не корректную верстку сайта. Много это или мало судить вам. Могу лишь сказать что с каждым годом эта цифра стабильно уменьшается. Сам перепробовал 5 различных способов, некоторые требуют определенных условий для корректной работы. Другие справляются с задачей, но не в полной мере (не поддерживают прозрачный фон в CSS). В итоге нашел самый оптимальный и стабильный способ - использовать javascript под названием DD_belatedPNG. Скачать DD_belatedPNG В теле тега HEAD вставляем следующий код

<!--[if IE 6]> <script src="DD_belatedPNG.js"></script> <script> DD_belatedPNG.fix('a, img, #header, #map_box2, #map_box, .frame_photo'); </script> < ![endif]-->

Где в скобках после DD_belatedPNG.fix пишем названия объектов которые мы хотим профиксить. Например есть у нас картинка с прозрачным фоном, вот ее html-код:

<img src="/transparency.png" alt="Картинка с прозрачным фоном" width="100" height="100" border="0" align="left" />

Добавим ей класс PngFix:

<img class="PngFix" src="/transparency.png" alt="Картинка с прозрачным фоном" width="100" height="100" border="0" align="left" />

Добавим обработчику скрипта DD_belatedPNG.fix класс

DD_belatedPNG.fix('.PngFix');

В итоге вот весь код html страницы с исправленным отображением прозрачных .png картинок в IE6:

<html>	<head>	<title>Прозрачность в IE6</title> <!--[if IE 6]> <script src="DD_belatedPNG.js"></script> <script> DD_belatedPNG.fix('.PngFix'); </script> < ![endif]-->	</head>	<body>		<img class="PngFix" src="/transparency.png" alt="картинка с прозрачным фоном" width="100" height="100" border="0" align="left" />	</body></html>

Для CMS Drupal вам нужно просто скачать модуль PNG Fix с официального сайта