How to check with jquery if Internet Explorer is running in Compatibility View

Question

Since jQuery.browser is deprecated and jQuery.support is the recommended tool to tackle browser issues, what's the recommended way to handle the following problem?

The Fullscreen theme of the Galleria jquery plugin doesn't work properly (wrong image positioning) in IE < 8 and in IE 8 and 9 compatibility view mode. Doctype is HTML 5, and turning off that mode with

<meta http-equiv="X-UA-Compatible" content="IE=edge">

does its job, but how do I use jQuery.support properly do check if the IE version is < 8 or the compatibility view is somehow still turned on (because then we use another theme for these users)?

Update: Here's the code we use now (at the bottom of the html).

<script type="text/javascript">
    $(document).ready(function () {
        if ($.browser.msie && $.browser.version < 8) {
            Galleria.loadTheme('js/galleria/themes/classic/galleria.classic.min.js');
            $("#gallery").galleria({
            /* ... */
            });
        } else {
            Galleria.loadTheme('js/galleria/themes/fullscreen/galleria.fullscreen.min.js');
            $("#gallery").galleria({
            /* ... */
            });
        }
    });

</script>

Can't you just use the right doctype and make sure the page renders in standards mode, not compatibility mode? Something like: ` `. — jfriend00, Jan 03 '12 at 09:56
You are not supposed to have to design your web page to function in multiple modes. You're supposed to pick the mode you want to design for, specify that and not worry about the other modes. If a viewer forces the page into another mode, they get what they deserve. — jfriend00, Jan 03 '12 at 10:01
@jfriend00: I am using the HTML 5 , and I think I did that does just that as it forces IE into standard mode. — Olaf, Jan 03 '12 at 10:03
@jfriend00: You can argue that way (although I certainly wouldn't as I try to make my site as compatible as possible), but it neither solves the IE 7 issue nor does it answer the jquery.support question. — Olaf, Jan 03 '12 at 10:04
Good luck designing for multiple modes then. That is not supposed to be something you have to do, even when designing for good compatibility. I don't know how to detect the mode in javascript which is why I didn't write an answer. You can check to see if modernizr has this capability or not and see how they do it. — jfriend00, Jan 03 '12 at 10:07

Merlyn Morgan-Graham · Accepted Answer · 2012-01-03T10:15:33.617

how do I use jQuery.support properly do check if the IE version is < 8 or the compatibility view is somehow still turned on?

jQuery.support isn't designed to detect browser versions, but to detect specific browser bugs. If you can determine the source of this bug (possibly tested by the .boxModel property?), you could base your if-statement on that logic instead.

Feature-detection is more robust than simply detecting browser versions as the tests ideally will work against any browser that is buggy - not necessarily just those in the IE family.

If you don't want to track down the source of that browser bug (and thus find the correct .support test), then this thread seems to give a slightly more "complete" test for browser version and compatbility mode detection.

Here's the code from that thread:

isIE8CompatMode() {
    return $.browser.msie
        && $.browser.version == 7.0
        && document.documentMode
        && document.documentMode == 8;
}

And of course you'd probably want to modify this to use < and > tests.

It still relies on $.browser, but seems to do extra detection for compatibility mode as well (via the IE-specific document.documentMode property).

Thanks for the explanation about jQuery.support and the .boxModel hint which I will check. The code you provided works for me. — Olaf, Jan 03 '12 at 10:21

score 2 · Answer 2 · answered May 17 '13 at 20:04

2

From the above, this is what I am using for IE7 Document or IE7 Compatabilty mode.

var IE7BrowserMode = ($.browser.msie && $.browser.version == 7.0);
var IE7DocumentMode = ($.browser.msie && document.documentMode && document.documentMode == 7);
return( IE7BrowserMode || IE7DocumentMode );

answered May 17 '13 at 20:04

dmd733

187
3
9

Thanks. A variation of Merlyns answer. – Olaf May 18 '13 at 06:36

score 2 · Answer 3 · answered Jan 03 '12 at 10:05

2

This is plain javascript, not jQuery. You could use documentMode. See here Determining Document Compatibility Mode. and here documentMode Property.

answered Jan 03 '12 at 10:05

Rosdi Kasim

24,267
23
130
154

Thanks, the document.compatMode looks promising. Although it leaves the jquery context. – Olaf Jan 03 '12 at 10:15

How to check with jquery if Internet Explorer is running in Compatibility View

3 Answers3