Главная » Блоги » блог 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 цифр
                                                                        
  ad888888b,    ad888888b,    ad88888ba            ,d8      ad88888ba   
 d8"     "88   d8"     "88   d8"     "8b         ,d888     d8"     "8b  
         a8P           a8P   Y8a     a8P       ,d8" 88     Y8a     a8P  
      aad8"         aad8"     "Y8aaa8P"      ,d8"   88      "Y8aaa8P"   
      ""Y8,         ""Y8,     ,d8"""8b,    ,d8"     88      ,d8"""8b,   
         "8b           "8b   d8"     "8b   8888888888888   d8"     "8b  
 Y8,     a88   Y8,     a88   Y8a     a8P            88     Y8a     a8P  
  "Y888888P'    "Y888888P'    "Y88888P"             88      "Y88888P"
Enter the code depicted in ASCII art style.
To prevent automated spam submissions leave this field empty.