PNGs in IE6

My preferred way of dealing with IE6’s limitations on transparent PNGs is to use conditional comments and the AlphaImageLoader filter. This is because it requires the least processing on the browser, and works without JavaScript enabled.

There are three problems with it. First up, you have to create a CSS rule for every PNG that you want to replace:

.class { background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘images/transparent.png’, sizingMethod=‘scale’); }

The second problem is that images in that file have to be relative to the page, unlike normal CSS background images whose URLs are relative to the CSS file.

And the final problem is that it only works for background images. You can’t replace tags with this method alone.

A solution to this would be a magic script that could take an existing CSS file, look at all the background-image styles, and generate an IE6-specific stylesheet that has absolute URLs and all the AlphaImageLoader filter statements.

Does something like that exist already? Let me know in a comment.

If it doesn’t, would you think it would be useful? I might write one.