What PNG Fix script do you recommend for IE6?

Question

I saw this post on SO but the selected solution got a couple of really unflattering comments...

I need to add a png fix script to my theme to handle issues with PNG support on IE6 predominantly. I have customers who say that IE6 is upwards of 1/3rd of their traffic if you can believe that. I know that Google is completely abandoning IE6 in Google apps, including Gmail this year, which will hopefully put the nail in the coffin, but until then...

What's the best PNG fix for use with WP?

Ideally, I want something that works but is very concise in code footprint.

Answer 1

Drawbacks using javascript to fix the PNG issue:

• higher chances theat the IE-6 visitor doesn't have javascript turned on, than on a modern browser
• ~1-2 sec. flicker until page finishes loading and javascript completes processing (on IE-6 js is slow)
• fixing repeating transparent background images is very buggy in these type of scripts, in most cases you'll get a CSS mess...

So I don't recommend any PNG "fix" script. Instead create 8 bit PNG images with alpha transparency:

http://www.ethanandjamie.com/blog/37-user-interface/81-png8-transparency-without-fireworks

You'll need to follow that tutorial because Photoshop can't save in this type of format. Then simply use them for IE 6 in a dedicated stylesheet.

The only drawback here is the lower quality of 8 bit (256 color) PNG images converted from a image with a high number of colors (which should really be rare on a website because of their size). But that shouldn't be a problem because IE 6 users are used to sh* quality anyway :)

Answer 2

The best png fix I have found is http://dillerdesign.com/experiment/DD_belatedPNG/. It is only 7kb. I have found it to work on any element (image or background image) I have tried without issue. It's the easiest method I have found.

The script not tied to a specific JS library so you can use it anywhere. I would recommend including the file in a conditional comment that targets IE 6 and you don't need to worry about the extra 7kb being added to the other browsers.

For HTML images I find it easy to add a class to the them via jquery ($('img[src$=.png]').addClass('pngFix');) then you can call that class in the DD_belatedPNG fix and it will get all the png images added through WordPress by the user.

Answer 3

I really like this plugin: http://wordpress.org/extend/plugins/hits-ie6-pngfix/

It works really well and includes multiple options for scripts to use, and it does everything for you.