[Bug] the IE filter has a serious bug in processing PNG images!

Today, we suddenly found a very serious problem:Set a filter for PNG images with Alpha channels under IE6, 7, and 8. The translucent pixels of the images are all black spots!

Although ie filters are not standard and are not recommended, they are often used to deal with transparency issues. Next we will discuss the most common filter: alpha ().

To put it bluntly, we areSet a transparent filter for a PNG-24 image with translucent pixels. There is no problem with other browsers, but ie!

This type of effect is not uncommon. Currently, the PNG format is used more and more. It can not only contain Alpha channels, but also have a higher compression ratio than GIF. If you are creating a simple image with a translucent dot in it, you will encounter this problem.

First, select a PNG image with a translucent dot. Pay attention to the following translucent part:

　　

The background color of the page is #660. Observe the performance in IE6/7/8. IE6 does not support translucent points, so it turns gray, which everyone knows. The translucent part contains the background color, which can be clearly displayed.

Then we added the Alpha filter to the IMG element, and the problem was immediately exposed: the original gradient circle is now solid, and the translucent points are replaced with black! Tested, not only the Alpha filter,All ie filters will lose PNG translucent pixels.

　　
After repeated tests, we found that,Add a background color to the IMG, And the translucent points are normal again.:

　　
To prevent white display, change # fff to transparent, but as a result, the translucent pixel strikes again :(

However, if the page background in this example is solid, setting the same background color as the page would work!

　　
However, in most cases, the film is followed by a complex background, so this still does not work. We try to nest the DIV outside IMG and set the filter on the DIV:

<style>body {background: #660}div{ position:absolute; filter: alpha(opacity=20); width: 256px; height: 256px;}img{ position:absolute;}</style><div> </div>

　　

　　
This time, IE8 encountered a strange phenomenon: the IMG element was not applied to the filter! The reason is that it sets position: absolute. If you delete this sentence, it will be the same as IE7.It can be seen that IE8 also has a bug: the filter will not be applied to the absolute positioning child element!However, when <meta http-equiv = "X-UA-compatible" content = "Ie = emulateie7"/> is added, the compatibility mode is okay.
　　
After some tests, div nested IMG still does not work. We may wish to use Div nested Div without loading the image using background. If you have a good memory, you should know that IE has an alphaimageloader filter. We try to use it to load PNG:

<style>body{background: #660}.out{ filter: alpha(opacity=20); width: 256px; height: 256px;}.in{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='alpha.png'); width: 256px; height: 256px;}</style><div class="out"> <div class="in"></div></div>

　　

This is the right time! Not only does IE7 and IE8 correctly show that our ancestor ie6. Success!
　　
Therefore, when creating PNG images in the future, ie should use alphaimageloader to load the image instead of the background image to avoid the loss of translucent pixels:

<style>
body{background: #660}

.out
{
    width: 256px;
    height: 256px;

    filter: alpha(opacity=20);
    opacity: 0.2;
}

.in
{
    background: url(alpha.png);
    *background: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='alpha.png');

    width: 256px;
    height: 256px;
}
</style>
<div class="out">
<div class="in"></div>
</div>