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