Прозрачный PNG в IE

13 дек. 2009 г. | | |

Тема довольно старая и избитая, но все же расскажу о том, что я делаю, чтобы в ИЕ прозрачные PNG картинки отображались без ужасного серого фона, который "любимый браузер" прикручивает к ним. И так, все совершенно не сложно.
Нам потребуется прозрачный gif размером 1х1 пикселей, которую назовем blank.gif. Далее, в хтмл-файле в разделе <head> пишем следующее:

<!--[if lt IE 7]>
<![if gte IE 5.5]>
<script type="text/javascript">
function fixPNG(element)
{
if (/MSIE (5\.5|6).+Win/.test(navigator.userAgent))
{
var src;

if (element.tagName=='IMG')
{
if (/\.png$/.test(element.src))
{
src = element.src;
element.src = "blank.gif";
}
}
else
{
src = element.currentStyle.backgroundImage.match(/url\("(.+\.png)"\)/i)
if (src)
{
src = src[1];
element.runtimeStyle.backgroundImage="none";
}
}

if (src) element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "',sizingMethod='none')";
}
}
</script>
<style type="text/css">
.iePNG, IMG { filter:expression(fixPNG(this)); }
.iePNG A { position: relative; }
</style>
<![endif]>
<![endif]-->

Не забудьте исправить путь к gif-изображению, иначе фокус не получится.
Собственно говоря, это все. Скрипт когда-то давно был честно скачан, откуда - не припоминается. Спасибо автору скрипта!

0 коммент.:

Отправить комментарий