How to Tell If a Browser Is in "Quirks" Mode

How to tell if a browser is in quirks mode?

In Firefox and Opera you can determine if your browser is in "quirks mode" by checking page info.

Using document.compatMode, will tell you the mode you are in with most browsers.

In Chrome, Safari, and IE, run this javascript in the address bar:

 javascript:window.alert('You are in ' + (document.compatMode==='CSS1Compat'?'Standards':'Quirks') + ' mode.')

(note that you'll need to re-type the javascript: portion after pasting into your address bar, due to recent security changes)

Is IE the only browser that uses Quirks mode?

No, browsers generally have a quirks mode. Each browser has its own quirks mode, though they share some of the behavior. There have been attempts to specify what exactly happens in quirks mode (more or less making it defined behavior), but the current situation is a mess: if you do not use a doctype string that triggers “standards mode”, you will get different quirks on different browsers.

See Activating Browser Modes with Doctype and What happens in Quirks Mode?

What is Quirks Mode in IE? When and Why we use Quirks Mode in internet explorer?

"Quirks Mode" means the browser tries to work in compatibility mode with older browser versions. Quirks mode kicks in if browser detects the site was coded/optimized for earlier versions of the browser.

You wrote you googled it and possibly hit this article, but in case you didn't:
http://en.wikipedia.org/wiki/Quirks_mode

"(...)a technique used by some web browsers for the sake of maintaining backward compatibility with web pages designed for older browsers(...)"

If you want a test, try this little guy (works both in Firefox and Internet Explorer -9-) here:

<HTML>
<meta http-equiv="X-UA-Compatible" content="IE=6" />
</HEAD>
<BODY>
<script>
window.alert('You are in ' + (document.compatMode==='CSS1Compat'?'Standards':'Quirks') + ' mode.')
</script>
</BODY>
</HTML>

Copy-paste the code above in a blank text file, save & rename it to [anything].html, then drag&drop to your browser. It'll display a message box telling you the browser is in quirks mode.
If you remove the meta tag, save the file & refresh browser page you'll see the browser switched back to standard mode.

There can be many reasons something says an HTML is broken but in your case, one good reason could be you force compatibility to old browser version(s) but use technology in your code that was invented later.
E.g. using "canvas" element (HTML5) and forcing IE6 compatibility (which is an old browser and doesn't understand HTML5 elements).

Transform rotate not working in Quirks mode

Just to be clear: The whole point of quirks mode is to emulate the way IE5 worked.

This includes disabling most of the HTML, CSS and JavaScript features that have been added to the browser since then.

If you are in quirks mode then you do not have those features. There is no work around or solution to this; that is how it is, and that's how quirks mode is intended to work.

If you have to use quirks mode then you also have to accept that your browser's capabilities will be from the 1990's.

Your only options are to work out how to upgrade your software so you can use it in a more modern browser environment, or else ditch the idea of using modern CSS and use whatever techniques where available back in the '90s. Probably a custom ActiveX control or a Flash animation. Pretty ugly, whichever option you go for.

I will also add the obvious point you really need to start thinking about how you're going to upgrade away from quirks mode. The default browser (Edge) that comes with Windows 10 doesn't support quirks mode at all. There will come a point in time when you simply can't avoid upgrading your desktop computers, and at that point, you may find that you simply won't be able to run your quirks mode site. It will be a lot easier if you start working toward dealing with that now than if you leave it and find it hits you in the face later on.

Discover Quirks Mode in IE

var quirksMode = (document.compatMode == 'BackCompat');
var isIE = ($('html').hasClass('ie'));
if ( quirksMode && isIE ) {
    $('html').addClass('quirks');
};
if ( document.documentMode == 7) {
    $('html').addClass('ie7_standard');
};

This solves this issue. It adds a class to html if you have Quirks mode in IE or IE7 Standards Document Mode set manually.

F12 in IE won't always show the new class name, but if you have css tied to that class, it will function.

Thanks for your help everyone!

I used this question (How to detect Render Mode of browser for current page?) as a starting point, but it seemed to be slightly outdated.

Doctype and Quirk modes and HTML 5

No. The whole point of quirks mode is that it's a compatibility mode for IE5. This means that in addition to changing the layout mode, it also switches off most of the browser features that have been invented since IE5.

Therefore the blunt answer is no, you cannot mix Quirks mode and HTML5. It just can't happen.

However there is some good news for you: switching from quirks mode to standards mode is actually easier than it looks at first glance.

You don't have to go through your whole site changing all the CSS to suit the different box model, because standards mode does have a CSS feature that allows you to use the quirks mode box model while still remaining in standards mode.

Simply add the following to the top of your CSS code:

* {box-sizing:border-box;}

This will change all your elements to use the quirks mode box model, but your page will still be in standards mode.

This should sort out most (if not all) of the layout issues you've been having.

Hope that helps.

How can I enable Quirks Mode on MacOS?

I found this extension where I can run internet explorer on your mac inside chrome: https://www.ietab.net/

How to Tell If a Browser Is in "Quirks" Mode