IE6 Png Fix с помощью jQuery https://lily-software.com Лента комментариев страницы Cotonti ru Mon, 06 Apr 2026 08:22:33 +0300 Комментируемая страница Internet Explorer 6-ой версии (лучший Web-браузер 2000 года :) ) входит в состав WindowsXP вплоть до SP3 (возможно и в SP4 ничего не изменится), а это значит что он установлен у большого количества пользователей. А они потециальные посетители Вашего сайта.

 

Как известно, один из главных недостатков этого браузера - он не умеет отображать прозрачность PNG-изображений. Вместо прозрачности он отображает красивую серую область. Существует несколько способов справиться с этой напастью. Сегодня мы рассмотрим один из самых простых способов. При помощи известной JavaScript библиотеки jQuery.

 

Предположим, что для JavaScript'ов на Вашем сервере отведена папка js в корне сайта, а изображения в папке images, также в корне сайта.

 

Если у Вас на сайте не установлена библиотека jQuery - устанавливаем ее. Для этого нужно скачать с сайта http://jquery.com последнюю версию и скопировать в вышеуказанную папку js.
Между тегами <head> и </head> на странице сайта добавим следующий код:

<script type="text/javascript" src="https://lily-software.com/js/jquery.js"></script>

 

В папку images поместим gif-изображение состоящего из 1 прозрачного пиксела. Прозрачность gif-изображений Internet Explorer 6 поддерживает :). Имя файла с изображением blank.gif. Скачать можно отсюда.

 

Теперь в папке js создадим файл с именем jqie6pngfix.js следующего соделжания:

// *********************************************
// * jQuery IE6 PNG fix by Alex
// * JavaScript
// * Alex & Natty studio
// * http://portal30.ru
// *
// * Alex & Natty Studio 2010
// *********************************************

/*
* Фиксим PNG для конкретного изображения
*/
function fixPng(png) {
    // get src
    var src = png.src;
    // set width and height
    if (!png.style.width) { png.style.width = $(png).width(); }
    if (!png.style.height) { png.style.height = $(png).height(); }
    // replace by blank image
    png.onload = function() { };
    png.src = blank.src;
    // set filter (display original image)
    png.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "',sizingMethod='scale')";
}


/*
*
*/
$(document).ready(function() {
    // =========== Фиксим PNG ==============
    var badBrowser = (/MSIE ((5\.5)|6)/.test(navigator.userAgent) && navigator.platform == "Win32");
    if (badBrowser) {
        // get all pngs on page
        $('img[src$=.png]').each(function() {
        if (!this.complete) {
            this.onload = function() { fixPng(this) };
    } else {
        fixPng(this);
    }
    });
    }
// ========= Конец: Фиксим PNG ==============

});

 

Между тегами <head> и </head>, после добаленной выше строки, подключающей jQuery, на странице сайта добавим следующий код:

<script type="text/javascript" src="https://lily-software.com/js/jqie6pngfix.js"></script>

 

Вот и все.

]]> чт, 22 июл 2010 20:41:00 +0300