Surplus in ie7 and ie8 intead of being Transparent while using PNG transparent and opacity

问题

I am developing a project that uses the PNG transparent and Opacity but, the area has a surplus in IE7 and IE8 instead of being transparent, it is black, can someone help me?

print of area

Thanks

回答1:

I have a solution for this, have used on multiple sites before.

Simply run this function after your html content has been written to the page:

function fixPNGs(){
  if(jQuery.browser.msie && jQuery.browser.version < 9){ 
    var i;
    //alert(document.images.length);
    for(i in document.images){
      if(document.images[i].src){
        var imgSrc = document.images[i].src;
        if(imgSrc.substr(imgSrc.length-4) === '.png' || imgSrc.substr(imgSrc.length-4) === '.PNG'){
        document.images[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + imgSrc + "')";
        }
      }
    }   
  }
}

It will only work on img elements and not background images. But once applied you can fade in and out images and animate to your hearts content. I have experienced some strange side effect on some ambitious animations but for 90% of the time it's fine.

Hope this helps you!

回答2:

IE7 and IE8 support different types of transparency in PNG. No problem on that side.

The problem you meet is IE7 and IE8 does not support CSS opacity. And you most likely have a JS script that manipulates the opacity (element.style.opacity) dynamically, for example to produce a fade effect. And how does the script to change element.style.opacity in IE7 and 8 if they do not support opacity? It uses a DirectX filter in place, the same that you can use CSS filter: alpha (opacity = 50);

DirectX filter is not a native support. The consequence is that often it off with side effects. The item will be displayed with a partial opacity will not be rendered by the graphics engine "normal" browser, but directly by DirectX ... with differences in the rendering of fonts on CSS positioning in some cases, and ... support PNG transparency.

Solution: Eliminate one of two parameters.

回答3:

It is important to note that the ALPHA filter in IE7 will not work without also setting the WIDTH.

来源：https://stackoverflow.com/questions/3951287/surplus-in-ie7-and-ie8-intead-of-being-transparent-while-using-png-transparent-a

标签

internet-explorer-8

internet-explorer-7

transparency

opacity