Некоторые пользователи интернета все еще используют IE 6 и ниже. К сожалению в IE6 не поддерживается прозрачность PNG. Поэтому приходится придумывать способы решения этой проблемы. Об одном я напишу в этом посте. CSS
Представляю Вашему вниманию код:
Code
* html img,
* html .png{
position:relative;
behavior: expression((this.runtimeStyle.behavior="none")&&(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)
);
}
Свойство «expression» позволяет использовать в CSS стилях JavaScript.
Существуют «условные комментарии» для IE, которые позволяют скрывать что то для остальных браузеров. В нашем случае это CSS стиль. Нужно добавить вышеуказанный код в отдельный css файл и прописать на странице:
Code
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="pngfix.css" />
<![endif]-->
Не буду много разглагольствовать о этом.
Селекторы
Рассмотрим селекторы:
Code
* html img,
* html .png
На первый взгляд выглядет все просто: свойство применяется для всех картинок и объектов с классом «png». Вы заметили, что перед тегом html стоит звездочка. Но перед тегом html не может быть никаких тегов! По-этому свойство в браузерах работать не будет, но не в IE. Только в IE 6 и IE 5.5 будет использоваться это свойство. Остальная часть кода
Не думаю что вы хотите сильно вникать в код. По-этому напишу только основное:
Изображение. Скрипт проверяет, является ли картинка png, если да, то применяется фильтр AlphaImageLoader, изображение становится фоном, а атрибут «src» заменяется прозрачным gif'ом. Ах да, забыл! Вам еще будет нужен прозрачный gif 1x1px.
Фоновый рисунок. Здесь проще. Все объекты с классом .png пропускаются через фильтр AlphaImageLoader и удаляется прежний background
Кроме того Вы можете использовать фильтр AlphaImageLoader вручную.
Скачать AlphaImageLoader http://msdn.microsoft.com/en-us/library/ms532969.aspx
