Перебрав множество способов для отображения PNG32 в Internet Explorer 6, я
пришел к двум, наиболее часто используемым решениям. Эти два способа не требуют
никаких внешних *.js или *.htc файлов и подходят для большинства случаев при
верстке сайтов. Все способы отображения полноценного PNG в IE, конечно же,
основываются на использовании фильтра
DXImageTransform.Microsoft.AlphaImageLoader.
Первый способ предназначен для правильного отображения
непосредственно картинок (HTML-тег <img src="...">) и основывается он,
похоже, на очередном глюке при рендеринге изображения в IE 6. Если у изображения
указаны запредельно высокие значения ширины и высоты — то оно просто
«исчезает».
Честно говоря, я даже не представляю как, и почему это работает.
Но факт есть факт, и «серый фон» у изображений PNG волшебным образом пропадает.
Правда были случаи, когда при определенной структуре разметки HTML-кода, этот
способ начинал глючить и раздвигал окно браузера на всю ширину, указанную в
CSS-хаке для картинки, но это можно исправить, если заключить изображение в блок
с position:relative + указать реальные размеры картинки + overflow:hidden. Также
этот способ подойдет для тега input с типом image.
CSS-код ниже иллюстрирует
первый «CSS-хак» для «PNG32 vs IE6»:
<style type="text/css">
/* IE6 PNG24+alpha support for images */
* html .pnghack { filter:expression('progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+ this.src +')');
width:expression(10000000000); height:expression(10000000000); }
</style>
<img src="images/image.png" class="pnghack" alt="" />
Примечание:
«* html» перед именем класса является CSS-хаком, и код будет отрабатываться
только в IE версии 6 (и возможно более ранних).
Второй
способ заключается уже в применении PNG32 в качестве бэкграунда (но без
возможности повторения по оси X или Y). Я написал небольшой код на Javascript,
который также находиться внутри выражения expression в CSS, и выполняет
следующие функции:
- читает значение фона (background) для основного блока, где мы распологаем
PNG32-изображение
- создает новый элемент <div> с абсолютным позиционированием, размерами
родительского блока и примененным фильтром «AlphaImageLoader»
- созданный элемент с фильтром помещается внутрь основного контейнера в левый
верхний угол
Код внутри expression «кэшируется» и выполняется
единократно. При этом, т.к мы применяем expression прямиком на свойство
background, тем самым, мы «удаляем» ненужный фон, который будет мешать работе
фильтра в IE 6.
Также, на основной (родительский) блок, должно быть
установлено относительное (relative) позиционирование, чтобы внутренний
контейнер с бэкграундом не «уехал» в верхний левый угол всей страницы.
Таким
образом, применение этого способа для отображения PNG 32, сводиться к тому,
чтобы просто в аттрибут «class» дописывать через пробел нужный класс, который
будет «исправлять» PNG в IE6.
Применение это способа и код ниже:
<style type="text/css">
* html .ie6png {
background: expression(
_this = this,
_this.f ? 0 : (
this.i = document.createElement('div'),
(function(){
with( _this.i.style ) {
position = 'absolute';
left = top = zIndex = 0;
width = _this.offsetWidth + 'px';
height = _this.offsetHeight + 'px';
filter = 'progid'+ String.fromCharCode(58) +'DXImageTransform.Microsoft.AlphaImageLoader
(src='+ _this.currentStyle.backgroundImage.replace(/[("")]/g,'').substr(3) +', sizingMethod=crop)';
}
})(),
(this.firstChild ? this.insertBefore( this.i, this.firstChild ) : this.appendChild( this.i ) ),
this.f = 1
)
);
}
div.sample { position:relative; width:300px; height:300px; background:url(image.png) no-repeat; }
div.sample * { position:relative; }
</style>
<div class="sample ie6png"> <a href="#">It works!</a> </div>
|
