General Musings

jQuery & quirks mode in IE6

Complaining about IE6 is like talking about the weather for web developers - for the most part, it’s something every one of us has had to deal with, and is about the most uncontroversial subject as you are going to find. There are some fine points where different camps disagree - should IE6 continue to be supported? Is the time spent coercing IE6 to play nicely worth the resulting increase in accessibility? Is it better to quit your job and become a lumberjack rather than spend the next three days fiddling with some tiny glitch? But for the most part the opinion of IE6 is that it is really terrible.

On the flip side, people love jQuery and other JavaScript libraries, and there’s good reason - anything that lowers the amount of code we have to write makes our job easier and decreases the number of bugs we have to deal with. Using jQuery, testing applications in other browsers is no longer a hold-your-breath-please-let-it-work, but rather just a simple affirmation that yup, everything’s working as expected.

Except in IE6 under quirks mode.

An excellent explanation of the history and difference between quirks mode and strict mode can be found over at QuirksMode, but what it comes down to is that historically, browsers have not done a very good job at matching W3C CSS standards, each getting it a little wrong in its own unique way. Eventually they (mostly) straightened everything up, and started following (most of) the specs - but elected to keep two modes of rendering pages. The strict mode would display pages meant to adhere to the written standards, whereas the quirks mode would render pages in the old, incorrect style that most pages had actually been written in, and which would break if suddenly interpreted according to spec.

It took me a whole day to realize that this was causing jQuery to act erratically on one of our projects. The ever-handy animate() and fadeout() functions would do a little jump at the end - shrinking and fading a div out of existence, only to have it pop back to its full size at the very end. I’d spent the day tweaking the jQuery function calls, messing around with stylesheets, and seeing if moving the elements around on the page would have any effect.

In the end, I found the QuirksMode article, as well as a few hints on StackOverflow, and adding <!DOCTYPE> cured the mysterious jumping.

Of course, turning quirks mode off can cause other problems in different areas of the code, especially if the page was designed from the ground up in quirks mode - but that’s a topic for another post.

© Copyright 2009 Innovative Media Design. All Rights Reserved.