Исправления проблемы с прозрачностью PNG в IE 6.

Все, наверное, знают, что png с прозрачным задним фоном некорректно отображается в IE а именно вместо прозрачного заднего фона фон имеет серый оттенок. Сегодня мы покажем как просто можно решить эту проблему .




1. создаём png.css с содержимым:

.iePNG, IMG { filter:expression(fixPNG(this)); }.iePNG A { position: relative; }

2. создаём pngie.js с содержимым:

function fixPNG(element){ if (/MSIE (6).+Win/.test(navigator.userAgent)) {  var src;    if (element.tagName=='IMG')  {   if (/.png$/.test(element.src))   {    src = element.src;    element.src = "images/blank.gif";   }  }  else  {   src = element.currentStyle.backgroundImage.match(/url("(.+.png)")/i)   if (src)   {    src = src[1];    element.runtimeStyle.backgroundImage="none";   }  }    if (src) element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "',sizingMethod='none')"; }}

Заметьте что строка

element.src = "images/blank.gif";

это путь к вашей 1пиксельной картинке которую вы должны залить к себе на хост и указать правильный путь.

3. Теперь подключаем css и js.

В сквозной файл сайта (как правило это index.php или header.php) ставя условие чтобы данный css и js работали только в IE6:

<!--[if lte IE 6]><script type="text/javascript" src="pngie.js"></script><link rel="stylesheet" type="text/css" href="/css/png.css" /><![endif]-->

Всё теперь в IE6 будет включаться JS из которого будет браться пиксельная картинка.gif и указать браузеру задний фон png.