Прозрачность PNG32 в IE 6 — лучшие решения - Каталог статей - Уроки по html/css - Разное www.Sefirut.ru - разработка шаблонов, сайтов, иконок, скриптов, создание сайтов набережные челны, студия веб-дизайна в Набережных Челнах, раскрутка и продвижение сайтов в интернете
| Сегодня Суббота 10.12.2016

Прозрачность PNG32 в IE 6 — лучшие решения


Перебрав множество способов для отображения 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>
Категория: Разное | Добавил: Admin (10.10.2010)
Просмотров: 1595 | Рейтинг: 1.0/1
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]