Discover Quirks Mode in IE

Question

I am working on modernizing an older SAAS software. I am their first front end person. They currently only support older IE browsers - and tell their users to turn on quirks mode in newer IE browsers to their software still works.

During the slow process of modernizing I still need those users software to work and not fall apart.

Is there a conditional comment, javascript or other functionality that could let me on the front end know that the browser has been set to quirks mode manually?

I don't want to turn it off, as it is making other parts of the system work, I just need to be able to add a quirks mode to the html tag so that I can work out the kinks in css.

Thanks in advance.

Edit

OK, I have a js solution, well almost... This will give me an alert every time, but will only add the class to the html when I manually change the mode in ie. Any ideas?

$(document).ready(function() {
    var quirksMode = (document.compatMode == 'BackCompat');
    var isIE = ($('html').hasClass('ie'));
    if ( quirksMode && isIE ) {
        $('html').addClass('quirks');
            alert('IE Quirks');
        }
});

OK, I also need to find if they are in Document Mode IE 7 Standard manually, I know this is a mess, but they need it and I think it's important enough to make this happen. I am having the same issue with it not putting the class on unless I am changing the stuff manually, not just on load. Here is this code... it's in the same document ready from above.

if ( document.documentMode == 7) {
    $('html').addClass('ie7_standard');
    alert('IE 7 Mode');
};

I don't understand the question. Are you asking that the site report to you remotely when a user clicks the compat mode button? — isherwood, Jul 30 '13 at 14:37
IE allows you the users to set which domains work in quirks mode. `[Alt] -> Tools -> Compatibility View Settings` ... add the sites needed. I'm not well versed in Active Directory, but I /think/ you can use group policy to push these settings — BLSully, Jul 30 '13 at 14:38
Based on the tags you've given, I'm assuming you want to know how to do this in Javascript? Or some other language? If you're wanting to know for Javascript, that's a repeat of this question: http://stackoverflow.com/questions/623047/how-to-detect-render-mode-of-browser-for-current-page — wilso132, Jul 30 '13 at 14:42
The company has been telling the users to use quirks mode because when their system updates their IE our software stopped working. I need to start implementing more modern code to move to cross browser. This breaks things in quirks mode for those users who have manually set it. I need to identify that the user is in quirks mode, preferably by adding a class to the tag, so I can try to minimize the mess it's making with the modern updates. — Ammi J Embry, Jul 30 '13 at 14:42
Honestly: create the modern version as a separate app (maybe host it in a subdomain), and ask customers to "upgrade" when it's ready enough. Maintaining a front-end that is both modern and supposed to work in quirks mode will be a nightmare. — bfavaretto, Jul 30 '13 at 14:55
wilso132's direction to this question - http://stackoverflow.com/questions/623047/how-to-detect-render-mode-of-browser-for-current-page - has got me moving in the correct direction. I'm going to take that as an answer. Once I get it working how I need it to, I will post the answer here. Thanks for all your help. — Ammi J Embry, Jul 30 '13 at 15:04
Adding `* {box-sizing: border-box;}` to your CSS will deal with the box model differences, which covers a very large proportion of the quirks mode/standards mode conversion issues. The remaining quirks and bugs will bite you (repeatedly), but they're much harder to deal with. Good luck (you're going to need it). — Spudley, Jul 30 '13 at 15:28

score 1 · Accepted Answer · edited May 23 '17 at 12:20

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.

Discover Quirks Mode in IE

1 Answers1