ie и png с прозрачностью 29.01.2008
Проблема в том что IE стандартно не отображает правильно картинки в формате png, но IE 5.5-6 начали учитывать альфа-канал в png картинках и для того что бы правильно отобразить картинки png необходимо применить фильтр AlphaImageLoader описание которого можно прочитать на странице http://msdn2.microsoft.com/en-us/library/ms532969.aspx.
Для отображения картинки png, в ie (до версии ie 5.5 данные классы работать не будут), можно прописать следующий класс:
img.png{
behavior:expression(!this.flag ? this.flag = (this.style.filter =
'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + this.src + '", sizingMethod="image")', this.src='/spacer.gif', true) : '' );
}
этот класс подходит для применения к картинкам или например к input (
), а для того что бы этот код применить к заливке можно использовать следующий класс:img.png{
background:none;
behavior:expression(!this.flag ? this.flag = (this.style.filter =
'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/picture.png" mce_src="/images/picture.png", sizingMethod="scale")', this.src='/spacer.gif', true) : '' );
}
В данном примере заменяется параметр sizingMethod (описание данного свойства можно прочитать на http://msdn2.microsoft.com/en-us/library/ms532920(VS.85).aspx) на scale и в качестве src указывается адрес картинки png. Но встаёт вопрос с тем как определить ie, для этого можно воспользоваться JavaScript или можно использовать следующий код:
Данный код вызывается только в ie, а остальные браузеры, его игнорируют.
Так же существует метод с применением файлика htc:
img.png{
behavior:url(/articles/png.htc);
}
Проблема данного метода в том, что создаётся прозрачная картинка над картинкой и поэтому не работает например событие onClick, так же необходимо указывать ширину и высоту картинки.