346
 
Главная » Internet Explorer » Новый скрипт для исправления прозрачных PNG в IE6

Новый скрипт для исправления прозрачных PNG в IE6

17 июля 2008 Internet Explorer, скрипты

Для исправления старой проблемы с прозрачными PNG в IE 6, я часто пользовался скриптом IE PNG Fix, который использовал behavior для исправления этого бага. Этот скрипт благополучно исправлял как простые изображения, так и фоновые, однако одна проблема все же существует - это невозможность растягивать изображение при помощи background-repeat.

Вчера я узнал о новом скрипте Unit PNG Fix, который может исправлять прозрачность изображений и при этом растягивать их. Заметьте, не повторять изображение, а именно растягивать, потому что свойство filter не позволяет повторять элементы. Это конечно не идеальный вариант и не для всех фоновых изображений подойдет, но все же таким образом можно симулировать повторение. Этот скрипт использует JavaScript вместо behavior для исправления прозрачности.

Unit PNG Fix

Для того, чтобы работать с этим скриптом, его достаточно просто подключить - не нужно создавать никаких объектов или вызывать функций при загрузке:

<script type="text/javascript" src="unitpngfix.js"></script>

Как и аналогичные скрипты, он требует также пустой gif файл clear.gif (входит в дистрибутив). Размер скрипта всего 1 килобайт.

скачать

Добавить в закладки:

Комментарии на “Новый скрипт для исправления прозрачных PNG в IE6”

  1. Витя 20 июля 2008 в 16:54

    По-моему ИЕ 6 уже никто не пользуется ))

  2. NikoDim 31 июля 2008 в 7:31

    Нашел ошибку!

    Если у элемента с прозрачным png на фоне указан отступ сверху и(или) снизу (padding), то скрипт увеличивает высоту элемента еще на отступ(ы) (padding-top, padding-bottom). Для устранения этой проблемы сделал следующее:

    вместо строки:

    es.height=el.clientHeight+’px’;

    написал:

    var ht = el.clientHeight;
    var pt = el.currentStyle.paddingTop.replace(’px’, ”);
    var pb = el.currentStyle.paddingBottom.replace(’px’, ”);
    if (pt) ht -= pt;
    if (pb) ht -= pb;
    es.height = ht+’px’;

    теперь все работает правильно и высота отображается верно=)

  3. NikoDim 31 июля 2008 в 7:43

    даже можно оптимизировать, и вот так написать:

    var ht = el.clientHeight - el.currentStyle.paddingTop.replace(’px’, ”) - el.currentStyle.paddingBottom.replace(’px’, ”);
    es.height = ht + ‘px’;

  4. NikoDim 31 июля 2008 в 7:49

    и даже так:

    es.height=(el.clientHeight-el.currentStyle.paddingTop.replace(’px’,”)-el.currentStyle.paddingBottom.replace(’px’,”))+’px’;

  5. admin 31 июля 2008 в 11:35

    @NikoDim
    Интересно. Надо отправить этот баг создателям скрипта.
    По моему вместо replace можно и так сделать:
    parseInt(el.currentStyle.paddingTop)
    Впрочем, это мелочи …

  6. Элла 1 октября 2008 в 10:25

    Спасибо за скрипт, весь инет облазила - единственный скрипт который у меня заработал!

Оставить комментарий

JSToolbox создан на основе WordPress