Главная » Блоги » блог 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    888888888888   888888888888    ad888888b,     ad8888ba,  
 88                    ,8P'           ,8P'   d8"     "88    8P'    "Y8  
 88  ____             d8"            d8"             a8P   d8           
 88a8PPPP8b,        ,8P'           ,8P'           ,d8P"    88,dd888bb,  
 PP"     `8b       d8"            d8"           a8P"       88P'    `8b  
          d8     ,8P'           ,8P'          a8P'         88       d8  
 Y8a     a8P    d8"            d8"           d8"           88a     a8P  
  "Y88888P"    8P'            8P'            88888888888    "Y88888P"
Enter the code depicted in ASCII art style.
To prevent automated spam submissions leave this field empty.