14

Can I differentiate if client's browser is IE7 or e.g. IE9 in IE7 compatibility mode? I'm trying to figure out if I can do a JS check on my site which would recognize two different things and do different stuff depending on the result

  1. that browser is IE7
  2. that browser is in IE7 compatibility mode

I have the first condition working correctly as it's pretty much said everywhere how to do it. Not sure about the second one and/or combination of both.

Ilmari Karonen
  • 49,047
  • 9
  • 93
  • 153
vault-boy
  • 523
  • 1
  • 6
  • 18
  • 1
    You can pass meta tags to force the best rendering engine available so that you don't have to worry about compatibility mode ever happening. – Teddy Apr 18 '12 at 16:22
  • ah, yes, completely missed that. However, can I actually set meta tag to say 'use best engine' or do I have to point to a specific engine eg . – vault-boy Apr 18 '12 at 16:34
  • 1
    You can use `content="IE=edge"` to use the latest available. Though this is not encouraged. – Sampson Apr 18 '12 at 16:36
  • not encouraged because it's better to write proper code? Or not encouraged because it may cause issues? I know the code should be written in a way that it should work fine without hacks on all browsers. However in this particular situation rewriting is not possible so I have to introduce hacks and force best engine available for given IE – vault-boy Apr 18 '12 at 16:39
  • @vault-boy MSFT encourages you to avoid using `edge` as you cannot test your site in unreleased browsers that don't exist. Instead, use the latest version you have tested against, whether that be IE9 or IE10 on Windows 8. – Sampson Apr 18 '12 at 16:44
  • possible duplicate of [Detect IE8 Compatibility Mode](http://stackoverflow.com/questions/1328963/detect-ie8-compatibility-mode) – Dennis Apr 18 '12 at 16:52

5 Answers5

8

For at least IE8 and IE9, you can check whether navigator.userAgent has the substring Trident in it. An IE8+ always has a Trident in its user-agent, where an IE7 doesn't. See this answer and the MSDN link in it.

IE10 seems trickier: it is reported in the comments below that Trident is not always present with IE7 emulation mode. Probably the OS string (eg. Windows NT 6.2) will still reveal IE10, if IE10 will not be available on any platform where IE7 is available.

Please also note that the HTTP User-Agent header might not always match navigator.userAgent. This is the case at least with IE9 that has compatiblity mode on (sends an IE7 User-Agent header) but detects something like IE=Edge in the response (navigator.userAgent turns back to IE9).

Community
  • 1
  • 1
tuomassalo
  • 8,717
  • 6
  • 48
  • 50
  • 1
    exactly :) if the browser has "Trident" and "MSIE 7.0" in the user agent it is most likely a ie>7 in compat mode. no "trident" but "MSIE 7.0" means most likely a real IE7. – sdepold Sep 06 '12 at 08:59
  • just tried it and this works, this should be the accepted answer – ha1ogen Oct 30 '12 at 14:40
  • 1
    Here is the ua-string for IE10 on Windows 8 in IE7 mode: `"Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.2; WOW64; .NET4.0E; .NET4.0C; .NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729; Tablet PC 2.0)"`. As you can see, it is false to suggest that IE8+ *always* has the Trident substring. The source provided predates modern IE browsers by over 2 years. What worked in 2009, for Internet Explorer 8, isn't necessarily going to work for all IE instances thereafter. – Sampson Dec 12 '12 at 15:06
  • @JonathanSampson: strange. My Win8 test machine gives this in IE7 mode: `Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.2; WOW64; Trident/6.0; .NET4.0E; .NET4.0C)`. Maybe the non-Trident UA string is linked with this `Tablet PC 2.0` thingy? Sigh. – tuomassalo Dec 17 '12 at 09:43
  • @tuomassalo What device are you running Windows 8 on? Please note that it is *not true* that IE8+ "always" contains the reference to Trident. – Sampson Dec 17 '12 at 18:44
  • @JonathanSampson: I'm running Win8 in a VMware virtual machine. There IE10 says `Trident` (regardless of the desktop/Metro UI choice). – tuomassalo Dec 18 '12 at 14:09
  • @tuomassalo I'm running Windows 8 native on my laptop; you might want to update your answer. It may have been true a few years ago - but the article spoke too broadly. Clearly, user-agent strings are *not* to be trusted ;) – Sampson Dec 18 '12 at 14:13
7

I don't believe there is a way to detect if the user's browser is in compat mode. Their user agent string will be determined by their browser mode, and their document mode will be determined by either the presence of an x-ua-compatible meta tag (or header), or possibly by the doctype used.

Compatibility Mode was meant to protect the modern-browser-user from pages that relied on old and outdated features or hacks. It's not really something you would want to test against. Instead, write standards-compliant code which will be understood by the browser in either compat mode, or non-compat mode.

Here are the various results of differing Browser Modes and Document Modes:

Browser Mode: IE10 Compat View / Document Mode: IE7 standards

navigator.userAgent
 
"Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.2; WOW64; Trident/6.0; 
.NET4.0E; .NET4.0C; Media Center PC 6.0; .NET CLR 3.5.30729; 
.NET CLR 2.0.50727; .NET CLR 3.0.30729; BRI/2)" 

document.documentMode

7

Browser Mode: IE7 / Document Mode: IE7 standards

navigator.userAgent

"Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.2; WOW64; .NET4.0E; 
.NET4.0C; Media Center PC 6.0; .NET CLR 3.5.30729; .NET CLR 2.0.50727; 
.NET CLR 3.0.30729; BRI/2)"

document.documentMode

7

As you can see, by these two methods there is no way to tell if the user is in compat view or not.

Overriding Compat View List

If your site appears on the compatibility view list, you can override their suggested rendering options by providng your own x-ua-compatible header:

<meta http-equiv="x-ua-compatible" content="IE=9" />

This forces your browser into IE9 Standards Mode (no evaluation of the doctype). You could use IE=edge to force it into the latest mode possible (on Internet Explorer 10, this would be IE 10 Standards), but this is not encouraged. Instead, set it to the latest mode you've tested with.

If the x-ua-compatible header is set to IE10, but the user visits your page on an earlier browser, the nearest rendering engine will be used. For instance, if the user visits your page with IE9, and your meta tag instructs the browser to use IE10, the browser will fallback to IE9 Standards mode.

Note that IE=9 causes the browser to go into IE9 Standards Mode. It doesn't necessarily cause the browser to behave as though it were IE9. If you want the browser to behave as though it were IE9, you would want to use the EmulateIE9 content:

<meta http-equiv="x-ua-compatible" content="IE=EmulateIE9" />

This causes the browser to fallback on the DOCTYPE, if it's present, to determine whether the document mode will be Standards, or Quirks.

For further information, see Defining Document Compatibility.

Community
  • 1
  • 1
Sampson
  • 265,109
  • 74
  • 539
  • 565
  • thanks. In the comment above I'm trying to find out what is the syntax for 'best available engine' so I always get IE8 engine on IE8 and IE9 engine on IE9. If I set it to be content="IE=9" IE8 presumably won't understand this and may still work in compatibility mode – vault-boy Apr 18 '12 at 16:37
  • @vault-boy See the last part of my answer. You should avoid `edge` since you cannot test unreleased browsers. Instead, set it to the latest version you have tested. If you're doing any Windows 8 testing, you can check your site on IE10, and if it works, set to IE10. – Sampson Apr 18 '12 at 16:42
  • well, it won't use IE10 engine if you have IE8 installed, unless you upgrade the browser itself to IE10. Right? – vault-boy Apr 18 '12 at 16:47
  • I'm intending to leave this hack on the live site so I cannot force to use IE9 as such setting won't apply on IE8s. Am I correct? – vault-boy Apr 18 '12 at 16:48
  • If the declared engine (IE10) is higher than the browser is capable of, the browser will use its highest available engine (IE8 Standards on IE8). – Sampson Apr 18 '12 at 16:48
  • are you 100% positive about this? Having will force IE8 on IE8 browsers. And there won't be a risk of having IE8 run in IE7 compatibility mode? Asking as I don't have IE8 anywhere near at the moment to make sure that's working – vault-boy Apr 18 '12 at 16:50
  • @vault-boy If you have IE9 installed you can emulate IE8 and see for yourself. Press F12 to bring up the developer tools. Change your Browser Mode to "IE8" and see what the Document Mode results in. – Sampson Apr 18 '12 at 16:53
  • You can provide a list in the meta tag content: `content='IE=9,IE=8'` in other words, and then IE9 will be IE9 and IE8 will be IE8. (I guess nowadays you'd want `IE=10,IE=9,IE=8`.) *edit* ah I didn't see the part where the browser itself will do the best it can if it's not up to that level; the Microsoft documentation didn't make that clear (to me). – Pointy Jul 23 '12 at 15:00
  • Depending your your HTML layout, you may have to set X-UA-Compatible server-side as an HTTP header: https://github.com/h5bp/html5-boilerplate/issues/378 – EpicVoyage Jan 10 '14 at 16:52
  • @PegLeg3941 That discussion is several years old; are you sure it's relevant today? – Sampson Jan 10 '14 at 17:52
  • The HTML5 boilerplate project has now removed their conditional HTML tag for IE which makes this a non-issue for them -- if you support IE8+. Since this question is technically about IE7 support, I thought this should be pointed out. – EpicVoyage Jan 11 '14 at 23:24
3

For anyone reaching this thread on Google, here is another option:

Using the script located at http://www.quirksmode.org/js/detect.html....

if (BrowserDetect.browser == 'Explorer')
{
    if (document.documentMode == 7 && BrowserDetect.version > 7)
    {
        // user is running IE in compatability mode
    }
}
Matt Robertson
  • 2,928
  • 5
  • 34
  • 62
  • 1
    I followed that approach as well, combining navigator.userAgent (to identify version) and then document.documentMode. – Vlad Jan 09 '13 at 23:47
  • This is the correct answer! http://msdn.microsoft.com/en-us/library/cc288325(v=vs.85).aspx accept it! – gcb Jan 16 '13 at 01:41
  • 2
    plus, Ditch the plugin... if( document.documentMode && document.documentMode < 7 ){ // that's all you need! first check confirms it's IE, second one confirms it's either IE5, IE6 or any newer one in compatibility mode. – gcb Jan 16 '13 at 02:24
2

This works for me:

/**
 * Actual IE8-Browser running in IE8-Compat-Mode or IE7 Mode?
 */
MyUtils.isIE8CompatMode= function(){
    if($.browser.msie && navigator.userAgent.indexOf('MSIE 7.0')>=0){
        return true;
    }
    return false;
}

An actual IE8 browser has 3 Document-Modes (IE7, IE8 & Quirks) and 3-Browser-Modes (IE7, IE8 and IE8-Compatibility). We can enforce the Document-Mode to be IE8 with:

 <meta http-equiv="X-UA-Compatible" content="IE=8,chrome=1"/>

But, we cannot enforce the Browser-Mode, which is determined by Browser-configuration. For example: some of our customers have the "render all pages in compatibility-mode"-checkbox checked in their Compatibility-View-Settings-Dialog. If that is the case, we can do nothing about it.

See the very enlightening diagram on this site:

-> How ie8 determines compatibility-mode

What do we use the above function for? Since our Page shows some glitches when in compatibility-mode we need to tell the user, why it is looking bad and what he can do about it. So we use the above function to tell if we are in trouble and then render a small warning to the user.

In ie9 and ie10 compatiblity-modes our app looks fine, so we dont need it there. This response may be considered an answer to this question: detect ie8 compatibility mode which was marked as a duplicate of this one. Perhaps it helps someone.

Community
  • 1
  • 1
felvhage
  • 1,149
  • 8
  • 6
0

Here is a fairly bullet-proof check that I did for a large-scale auction site based in San Jose.

var userAgentString = navigator.userAgent;

if(/MSIE 7\.0/gi.test(userAgentString) && /Trident/gi.test(userAgentString)){
    // compatibility mode
    // .... code goes here ....
}
seangates
  • 1,467
  • 11
  • 28