During the last months I've downloaded dozens and dozens types of jQuery plugins, used a few and found out that many of them are not cross-browser. If you've read some of my previous posts on the subject of backward compatibility with IE6 and 7, you probably know what's my standpoint. However, jQuery plugins are a completely different category. When you write a jQuery plugin, you're actually providing a new functionality to the web community using jQuery. Though it would be better if in our sites and application there was no room for IE6 and 7, sometimes our clients ask us to support these browsers or, speaking more frankly, they order us to extend our support to IE6 and 7 for whatever reason (they probably have their reasons, which obviously we don't endorse). How we can do this?
It's pointless to first write the entire plugin and then test in IE6 and 7. Instead, write a routine, test it and move to the next routine. And so on. It's better to write these subcomponents as separate functions and then incorporate them in your plugin when it's proved that they work. The next step is to test whether these components work well together, so the next phase is to build up your plugin routines by combining your subcomponents. Done that, test them again to see if they work correctly together. Then move on.
An interesting side effect concerning IE6 and 7 is the wrong handling of image opacity. More precisely, this problem extends also to IE8. In short, if your images have a transparency, IE will show a black outline when your image becomes visible again after being hidden with a jQuery effect. When the opacity of the image is restored, the black outline disappears. To fix this, try to use alternate images without alpha transparency.