PNG-24, проблема отображения в IE. Как исправить?

16.11.2011

Проблема:
В браузере IE версии 6 и ниже неверно отображаются прозрачные картинки в формате PNG.

Решение:
Как и всегда на просторах интернета довольно легко найти множество готовых решений проблемы, но далеко не все они работают в контексте той или иной ситуации.

Суть решения заключается в использовании фильтра AlphaImageLoader

Установить фильтр можно через стили или через скрипт:

1
2
3
4
5
 
<div style="height:250px; width:250px;        

  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/bg.png', sizingMethod='scale');">

</div>
 

1
2
3
4
 
<script type="text/javascript">
document.getElementById('elemId').style.filter =
 "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/bg.png', sizingMethod='scale')";
</script>

Но это только общий вид.

 

Еще нужно учесть, что нужна прозрачная картинка на замену строй, в моем примере она лежит по адресу:

/images/system/transporant.gif

 

Для решения мой проблемы подошел такой вариант:
На JavaScript использовать функцию:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
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 = "/images/system/transporant.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='scale')";
  }
}

А в CSS добавить:

1
2
3
4
 
img, .img
{
    filter:expression(fixPNG(this));
}

Проблема этого метода в параметре sizingMethod='scale' – из-за него некоторые фоновые картинки могут сильно деформироваться.

Категории: IE
Яндекс.Метрика