Исчезающий PNG в Internet Explorer не работает

Question

У меня есть div, который содержит изображение в формате PNG, например:

<div id="pop" class="pop_komm">
<img src="Graphics/komm.png">
</div>

У меня есть код js, который запускается в событии "OnChange" в раскрывающемся списке:

<select onchange="fadeIn('pop');" name="list" etc></select>

Вот код js:

function setOpacity(eID, opacityLevel) {
    var eStyle = document.getElementById(eID).style;
    eStyle.opacity = opacityLevel / 100;
    eStyle.filter = 'alpha(opacity='+opacityLevel+')';
}
function getElm(eID) {
    return document.getElementById("pop");
}
function show(eID) {
    getElm(eID).style.display='block';
}
function hide(eID) {
    getElm(eID).style.display='none';
}
function fadeIn(eID) {
    setOpacity(eID, 0); show(eID); var timer = 0;
    for (var i=1; i<=100; i++) {
        setTimeout("setOpacity('"+eID+"',"+i+")", timer * 2);
        timer++;
    }
    setTimeout("fadeOut('"+eID+"')", 5000);
}
function fadeOut(eID) {
    var timer = 0;
    for (var i=100; i>=1; i--) {
        setTimeout("setOpacity('"+eID+"',"+i+")", timer * 2);
        timer++;
    }
    setTimeout("hide('"+eID+"')", 310);
}

Проблема в том, что непрозрачность делает углы PNG шероховатыми и черными, а прозрачность PNG не работает вообще. Я попытался использовать pngfix, который помогает, если PNG не имеет эффекта "затухания". Но как только я применяю этот эффект затухания, у меня возникает та же проблема.

Кто-то должен был решить это раньше, поэтому, пожалуйста, дайте мне совет, как решить это.

Я гуглил и нашел это , но я не совсем понимаю, что он имеет в виду.

Если вам нужно больше информации, дайте мне знать ...

Кстати, это работает во всех основных браузерах, кроме IE6, 7 и 8.

Спасибо

Answer 1

Да, установка alpha для прозрачного PNG полностью заменяет альфа-канал значением opacity, поэтому прозрачные части возвращаются в исходное состояние.

Как говорит страница, на которую вы ссылаетесь, вы можете поместить фильтр alpha в элемент, который содержит PNG, который обычно выглядит лучше, но этот элемент контейнера должен иметь hasLayout, Добавьте height или zoom или что-то еще в контейнер, чтобы вызвать сумасшедшую ерунду IE hasLayout.

Это все еще не совсем верно, поскольку в итоге каждый пиксель имеет минимальную непрозрачность альфа-значения этого пикселя и набор opacity вместо умножения непрозрачности. Таким образом, полупрозрачные части изображения имеют неправильную относительную прозрачность. Тем не менее, он может выглядеть довольно эффектно как эффект постепенного увеличения.

Полная мультипликативная непрозрачность не может быть сделана в IE до IE9.