Using html5 quirks mode in IE9

StackOverflow https://stackoverflow.com/questions/18315137

Question

I've created a form that is dynamically created with JavaScript and is added in another website using the <script> tag.

The doctype used by this other website is <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> which uses the quirks mode.

I've built my form by taking this in consideration and everything is working as expected in Chrome, Firefox and IE 10. However, when I test it in IE 9 and earlier, the form is not displayed at all. When I open the developper tools, I can see that IE 10 uses the new quirks mode but IE 9 and earlier uses the IE5 Quirks mode.

I was wondering if the new quirks mode can be used to display this page when using IE 9 and earlier. If this is not possible, I would like to force standard mode but only when using IE 9 or earlier and keep using quirks for every other browser.

I can't use the html5 doctype since their website is built with quirks mode instead of standards and their design is all broken when I use this doctype.

Was it helpful?

Solution

You cannot change the mode once the page is loaded. And you cannot change it programmatically. The only way to force a page into quirks mode is to load it without a valid doctype or with serious bugs in the HTML.

If you have a doctype, but your page is still loading in quirks mode, then it means that you have serious bugs in your HTML. This will give you bigger problems than just being in quirks mode. You should definitely fix those bugs. If you really want to be in quirks mode, drop the doctype, but you should really try not to have HTML code that is so bad it triggers quirks mode even with a doctype!

You can validate your HTML to find those bugs by using the W3C validator.

In terms of switching your page at runtime between IE10's two different quirks modes, the simple answer is that you can't do that.

Sorry about that.

However, to be honest, it's probably for the best. Using quirks mode is be a complete disaster anyway. It doesn't just change the layout mode; it also switches off most of the browser's features (ie pretty much everything invented since 1998).

But now for the good news:

Luckily, switching away from Quirks mode is a lot easier than you think.

The main layout issue (the different box model) can be fixed by adding the following to the top of your CSS:

*{box-sizing:border-box;}

This is the standards-compliant way to set the box model to the quirks-mode style layout. Most of the broken layout problems cause by switching from quirks mode to standards mode can be resolved with this simple CSS style.

There are other quirks, but they're relatively minor and shouldn't be too hard to deal with once you've fixed the main issue. A lot of them are actually not quirks mode issues, but bugs in older IE versions that the original coder may have had to hack his way around. There's no guarantee that these will continue working the same in future versions anyway, even if you do stick to quirks mode, so you would be best off fixing them now anyway.

So, to summarise:

  1. Fix your page so it loads in standards mode. Valid doctype and valid HTML.
  2. Use box-sizing to mitigate the main layout gremlins caused by the switch.
  3. Fix the remaining layout issues manually.

It's really a lot less work than it sounds. Honest.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top