what is the ultimate solution for png transprant when using css sprite in ie<7

Question

Suppose I have this element which will use the css sprite with the whole image:icon.png(80x120):

<div class="sprite"></div>

Normally,I use this:

.sprite{
    background-image:url('icon.png');
    background-position:0px -20px;
    width:20px;
    height:20px;
}

For IE6,how to make it?

Edit:

From some answers for this post,I found that many people try to give a solution for solve the "png transprant" problem.

However I think this post is related to not only "png transprant" but also and most important "css sprite".

That's to say,even we make the sprite.png transprant in ie6,but how to set its position in the right place?

Answer 1

I have coded my own jQuery PNG fix some time ago.

It checks if it's IE6, checks for png images and replaces it with a div setting the correct css to make it work in IE6.

Add the function to your scripts, and call the function when ever needed.

function muIE6PngFix() {
    $(function() {
        if ($.browser.msie && $.browser.version <= 6) {
            $('img').each(function(i, e) {
                if ($(e).attr('src').toString().toLowerCase().indexOf('.png') != -1) {
                    $(e).wrap('<div />');
                    $(e).parent().attr('style', 'background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=' + $(e).attr('src') + ', sizingMethod="crop"); width:' + $(e).width() + 'px; height:' + $(e).height() + 'px;');
                    $(e).parent().attr('class', $(e).attr('class'));
                    $(e).parent().attr('title', $(e).attr('alt'));
                    $(e).css('visibility', 'hidden');
                }
            });
        }
    });
}

Answer 2

call png support script

<!-- START HTML : PNG FIX CODE  -->
<!--[if IE 6]>
    <script src="http://marszm.googlecode.com/svn-history/r12/trunk/js/DD_belatedPNG_0.0.8a-min.js" type="text/javascript"></script>
        <script type="text/javascript">
            DD_belatedPNG.fix('img,div,ul,li,li a,a,input,p,blockquote,span,h1,h2,h3');
        </script>
<![endif]-->