Пропустить навигацию

PNG прозрачность в IE6

05.06.2007 , ,

Долго искал простейшее и универсальное решение использовать png прозрачность в Interner Explorer 6. Причем интересовало и для обычных изображений, и для фона.

Порядок следующий:

  • Скачиваем iepngfix.htc, рисуем прозрачный однопиксельный .gif, называем его как угодно.
  • Проверяем и корректируем путь к нашему прозрачному изображению в iepngfix.htc
  • Вставляем в условные комментарии ссылку на стиль или сам стиль:
    #header { behavior: url(iepngfix.htc); } /* для фона */ 
    img, #header { behavior: url(iepngfix.htc); } 
    /* для фона и всех изображений */ 
    img { behavior: url(iepngfix.htc); } /* для всех изображений */ 
  • Наслаждаемся

Похоже ИЕ не воспринимает относительные пути для .htc, поэтому записывать данное св-во нужно в виде /css/iepngfix.htc, а точнее путь скрипта нужно прописывать относительно html документа, а не относительно .css файла.

Недостатки:

  • Невозможно разможить фоновое изоражение отдельно по осям x- и y-
  • Невозможно задать положение фона

Взято здесь — IE PNG Fix v1.0 RC4

С использованием expression

Понадобится однопиксельный .gif. Работает аналогично. Недостатки те же + наличие expression в CSS

* html img,
* html .png{
azimuth: expression(
this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true
);
}

css png image fix for ie

В архив