Question

I’m attempting to add a lightbox to an older website. This site will only display correctly in IE 8 with quirks mode on. Given this constraint, are there any lightbox plugins that function correctly? Are there workarounds for plugins that don’t support quirks mode?

I’ve tried ColorBox with no success (the ColorBox FAQ states outright that quirks mode is not supported).

Answer 1

There is virtually nothing available today that is intended to work correctly with Quirks mode.

Quirks mode was obsolete in 2001 — it’s basically an IE5-compatibility mode. If your code is still using it, then it’s got a serious problem. By far the best answer would be to upgrade your site not to use quirks mode any more.

The good news is that this actually isn’t difficult, if you only need to support IE8 and above, because IE8 supports a CSS feature called box-sizing. (This doesn’t work in IE6 or IE7, which is why quirks mode has lingered so long, but it’s fine in IE8)

box-sizing is a standard CSS feature that works in all browsers, and allows you to specify the box model to work like quirks mode.

The box model is the primary difference between quirks mode and standards mode, so in order to make a site written for quirks mode work in all browsers, simply set the box-sizing across the whole site: the following code should do it:

* {
   -moz-box-sizing:    border-box;
   -webkit-box-sizing: border-box;
   -ms-box-sizing:     border-box;
    box-sizing:        border-box;
}

You can then add the doctype and put the site into standards mode, and it should continue to work as before.

Once you’ve done that, you should be able to start using some modern browser features and up-to-date script libraries like the one you’re asking about.

Hope that helps.