Unlike other major browsers, Internet Explorer¹⁾ is unable to handle the proper display of .png images with alpha channel transparency. There is a proprietary mechanism which does allow IE to display these images, unfortunately to use this feature requires significant modification to the web page's html and CSS.

Some enterprising people have attempted to address this problem by producing solutions which make use of the proprietary mechanism and can convert a webpage on the fly (in the browser) to enable IE to display png images with alpha channel transparency.

This page is an attempt to summarise the solutions and their limitations.

IE can not properly display .png images which use alpha channel transparency. Other major browsers can. Graphics which can use alpha channel transparency look much better (have better edges) than those that don't.

IE can display alpha channel .png images, but only using its proprietary filter feature.

I know of three:

• pngbehaviour.htc
• sleight
• sleight background

What they all do, is to take a webpage which uses .png graphics in <img> tags and/or background-image attributes and convert the DOM representation on the fly to better display the .png graphics. The process of that conversion necessarily alters the internal page structure. The changes they use impose limitations on the solutions. To understand these limitations its necessary to understand how they each change the web page.

Understanding the limititations allows the web author to choose which solution, if any, is appropriate for any particular page and to design pages which will work with their chosen solution.

• works on foreground images <img> tag, that have src values ending in ".png" -
• implemented as an IE behavior²⁾ so it can work with properties that change after page loading.
• it replaces the .png image with a one pixel transparent gif and sets a filter using the .png image on the <img> tag.
• out of the box version does nothing with the <img> tag width and height. So if these aren't specified the <img> will collapse to 1×1 pixel after the change. (This can be fixed, see unspecified dimensions fix)

So, its ok to use this for foreground images where you can specify the image width and height. Also suitable for use in pages where an image may be changed.

• works on foreground images, <img> tag, that have src values ending in ".png"
• runs on load, can not handle dynamic property changes.
• replaces the <img> tag with a <div> tag. Fixes the height and width of the <img> tag to the <div> tag.

Suitable for static png images. The height and width of the image do not need to be fixed in advance.

• works on background images, any element with a background image file value that ends in ".png"
• runs on load, can not handle dynamic property changes
• replaces the existing background image with a 1px x 1px transparent gif
• uses "scale" setting for the filter, giving ability to stretch the background image to the size of the element
• lose ability to use background-position and background-repeat attributes

Suitable for static .png background images where the image is tailored to the element size. Not suitable for repeating backgrounds.

function fixImage() {
    // get src
    var src = element.src;
 
    // check for real change
    if (src == realSrc && /\.png$/i.test(src)) {
        element.src = blankSrc;
        return;
    }
 
    if ( ! new RegExp(blankSrc).test(src)) {
        // backup old src
        realSrc = src;
    }
 
    // -- unspecified dimension fix:
    // remove any runtimeStyle dimensions
    element.runtimeStyle.width = null;
    element.runtimeStyle.height = null;
    // -- end
 
    // test for png
    if (/\.png$/i.test(realSrc)) {
        // set blank image
        element.src = blankSrc;
 
        //-- unspecified dimension fix
        // assign the current dimensions to the runtimeStyle object
        // this has the effect of fixing the current dimensions whether they were specified or not
        // if the dimensions have been specified there is no change
        // if the dimensions aren't specified then the element will now retain its original dimensions
        // after the png image is replaced by the 1px x 1px gif
        element.runtimeStyle.width = element.width;
        element.runtimeStyle.height = element.height;
        //-- end
 
        // set filter
        element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft." +
                    "AlphaImageLoader(src='" + src + "',sizingMethod='scale')";
    }
    else {
        // remove filter
        element.runtimeStyle.filter = "";
    }
}

Bugs:

• Will not work properly on where the <img> has padding.
• On using the back or forward browser buttons IE will revert to original element's width/height values. Which means 1×1 if none were specified.

It should be possible to add an onpropertychange handler for both sleight and sleight background to enable them to support dynamic replacement of the base png image.