Главная » Блоги » блог teerex

unitpngfix - Исправление прозрачных png в Internet Explorer до 7 версии

3 Май, 2009 - 17:17, teerex

При создании шаблона для этого сайта я использовал много картинок в png с прозрачностью. В FF, Opera, Chrome, Safari - всё выглядит замечательно, но как открыл в ie - ужос! все прозрачные картинки на непонятном сером фоне.

Известное дело, всеми "любимый" браузер microsoft internet explorer 6, 5.5 и более ранних версий не отображает нормально png с прозрачностью.

Для исправления досадного недоразумения следует задать объектам дополнительные свойства, от MS IE (DXImageTransform.Microsoft.AlphaImageLoader и иже с ними). Зачастую, для этого используют jquery.pngFix — плагин для jQuery, который решает вопрос отображения PNG-файлов с полупрозрачностью в Internet Explorer 6 и 5.5.
Первым делом я так и сделал, но как оказалось - jquery.pngFix не исправляет прозрачность png, которые задаются в css свойстве background!

После недолгих поисков нашел подходящий инструмент - Unit PNG Fix!

Что даёт:

  • Очень компактный: меньше 1 кб!
  • Исправляет большую часть проблем, вызванных доп.аттрибутами IE
  • Работает и на объектах img и на аттрибутах background-image, background
  • Запускается автоматически. Не нужно определять классы, чтобы вызвать функции.
  • Поддерживает элементы с auto (автоматической) шириной и высотой.
  • Очень прост в установке.

Использование и установка:

  1. Скачайте архив Unit PNG Fix
  2. Из архива нужно 2 файла: unitpngfix.js(сам скрипт) и clear.gif(прозрачный gif 1x1 пиксель)
  3. Необходимо указать правильный путь к clear.gif в самой первой строке файла скриптаunitpngfix.js, например:
    var clear="/misc/clear.gif" //path to clear.gif
...
  4. Закачайте unitpngfix.js и clear.gif на хостинг.
  5. Подключите файл unitpngfix.js в секции head шаблона, например так:

    6. <head>
...  
<!--[if lt IE 7]>
        <script type="text/javascript" src="/js/unitpngfix.js"></script>
<![endif]-->
...  
</head>

  6. Всё, должно работать.
  7. Если что-то не заработало - проверьте пути к файлам (в шаблоне и в unitfix.js)

Страница проекта

Метки:

# | лена (?)

анонимус аватар

хочу очень прозрачную понель

2 Сентябрь, 2011 - 12:00

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

Содержание этого поля является приватным и не предназначено к показу. Если есть аккаунт Gravatar, то отображается глобальный аватар.

Подробнее о форматировании

КАПЧА
А ты не робот? Введи 5 цифр
                                                                   
 8888888888      ad8888ba,   8888888888            ,d8         88  
 88             8P'    "Y8   88                  ,d888       ,d88  
 88  ____      d8            88  ____          ,d8" 88     888888  
 88a8PPPP8b,   88,dd888bb,   88a8PPPP8b,     ,d8"   88         88  
 PP"     `8b   88P'    `8b   PP"     `8b   ,d8"     88         88  
          d8   88       d8            d8   8888888888888       88  
 Y8a     a8P   88a     a8P   Y8a     a8P            88         88  
  "Y88888P"     "Y88888P"     "Y88888P"             88         88
Enter the code depicted in ASCII art style.
To prevent automated spam submissions leave this field empty.