JavaScript: Can I detect IE9 if it's in IE7 or IE8 compatibility mode?

Question

I need to know if the browser that's identifying itself via user agent string as being IE7 or IE8 is really those browsers, or whether it's IE9 in 7 or 8 compatibility mode.

From what I can see in the user agent string, an IE9 in IE7 compatibility mode, provides an identical string to a real IE7. Is there an extra property/element/object that I can test to see if it's "really" IE9 in disguise?

I assume the document mode won't help as the page my script is loaded into could either be forcing quirks or forcing a specific setting.

I'm hoping that IE9 will have some property that exists and is testable regardless of whether it's in 7, 8 or 9 mode.

---

_{Edited to add…}

OK, I see where I was going wrong now. I was using the "Browser Mode" dropdown and switching it to IE8 and IE7 and thinking this was "IE8 compatibility mode" and "IE7 compatibility mode" respectively. This is of course not true. The developer tools' Browser mode really is switching it to "be like" those old browsers, so it's only right that the original useragent strings be reported.

If I leave the browser mode in IE9 or IE9 compatibility and try the document mode dropdown variants instead, then I do in fact get "Trident/5.0" present in all 8 combinations (two browser modes and 4 document modes). I just need to steer clear of choosing browser mode IE7 and IE8 because they really are (simulated) IE7 and IE8.

So there's no way a page, a non-developer user, a meta tag, or Microsoft's compatibility list will be able to put IE9 into this unidentifiable state.

Just using if(navigator.userAgent.indexOf("Trident/5")>-1) will be sufficient.

Don't worry, this isn't for styles, formatting, logic or page content. I use feature detection for those things. I just need to detect IE9 (regardless of what mode it's in) and make a non-page content decision on that.

Thanks for steering me towards the answer with your suggestions and links.

Annikaanniken

Never trust the user agent...it can perfectly lie and there is no way to be sure if it's telling the truth or not...you should test for specific functions or features instead – Outguard

@Outguard Yes and no. This is a specific question how to find out whether it is IE9 in compatibility view, which is a reasonable question. In general one should not rely on user agent strings for site functionality as one can easily fake it, true. – Rewire

Even if the user agent is accurate, it's greatly preferable to use feature detection if at all possible. Then, you don't need to know whether or not IE is in compatibility mode in the first place. – Addax

I just want to add that this is very useful if you want to provide a quick tutorial to users who are using a wrong browser mode. – Trinia

@Outguard who would spoof their useragent and expect things to work correctly - should we really care about that case? – Folder

Answer 1

Actually the user agent string is different for IE9 when being run in IE7 compatibility mode, so this would be one of the best ways to distinguish between different IE versions.

Introducing IE9’s User Agent String:

Similar to IE8, IE9’s Compatibility View will map to IE7 Standards Mode, and IE9’s UA string when in Compatibility View will be:

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/5.0)

In Compatibility View, IE9 reports itself as IE7 through the application version number (Mozilla/4.0) and version token (MSIE 7.0). This is done for compatibility. An incremented Trident token, from ‘Trident/4.0’ to ‘Trident/5.0’, allows websites to distinguish between IE9 running in Compat View and IE8 running in Compat View.

(emphasis added by me). So the user agent string is the same as it reports itself being "Mozilla/4.0" and MSIE 7.0, but IE9 will always be Trident/5.0 - no matter whether it says MSIE 7.0, MSIE 8.0 or MSIE 9.0.

Actually you should check out this great compilation: Browser ID (User-Agent) Strings or even better useragentstrings.com

Rewire

Hi moontear. I also saw that "Trident/5.0" is supposed to be present when IE9 is in IE7 mode, but that's not what I'm seeing on my (final) IE9 on Win7 Pro x64. It's showing no trident at all in IE7 mode (which is what real IE7 looks like) and it's showing trident 4 in IE8 mode (again, what the real IE8 looks like). I'm using the IE9 developer tools first drop-down to select browser mode and then in the address bar alerting javascript:alert(navigator.userAgent) – Annikaanniken

"Trident/5.0" is present in IE9's user-agent string in all modes. – Lineament

As EricLaw says, Dee. Trident/5.0 must be present when you're using compatibility mode (might be different for browser mode?). How do you check the user agent string? Try to check via whatsmyuseragent.com and report back. – Rewire

See my response below (I had to use another id Dee2001 because of a stack overflow 8 hour rule about adding a response to your own message). Yes Eric and Moontear are both correct, Trident/5.0 is present in all of IE9's modes. My big mistake was changing "Browser Mode" to IE7 or IE8 in the developer tools, but that's not a "mode" that a page/meta tag/compatibility list can enforce. Instead it's really simulating the browsers themselves, so naturally the useragent string is truly like IE7/8. – Annikaanniken

This is perfect! Thanks so much. I don't style based on reported browser but I'm setting up a warning bar at the top of the site I'm working on that says the user needs to upgrade (if ie conditional tags say it's less than or equal to ie7) -- I don't want the message to say upgrade in this case but rather disable compatibility mode – Decompress

This doesn't work because, as stated by others, Trident/5.0 is present in all IE9 uAs, also in Comp. mode. See below, the answer by Yuhong Bao for a method that does work. – Biestings

My IE10 says Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; InfoPath.3) in IE7 mode and Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64;Trident/6.0) in IE10 moede – Comitative

IE10 emulating IE9 is Trident/5, IE11 emulating IE9 is still Trident/7 – Comitative

Answer 2

document.documentMode is the best way for document mode.

Arpeggio

Please expand the answer a bit. More context. – Stearoptene

Why aren't people plusing this, its exactly whats needed – Unicef

That is indeed the best way. You can use it this way: <script> if (document.documentMode == 7) alert("Yo, put it in its normal mode, will ya?") </script>. The real(!) IE7 and all non-IEs return 'undefined', only IE8/9 in Comp. mode return 7. I can't test IE10, but that should be the same. – Biestings

Just tried this in IE10 on a side with the edge META tag; normally, it returns "10". Force compatibility mode on for all sites, and it still returns "10". – Cockswain

Works for me in IE10 and IE11 Preview – Bismuthous

Just after realising that <!--[if lte IE 8 ]> works when in IE11 Compat Mode... Dont know if that is a good or a bad thing – Compony

@Whelkaholism: Then it would seem that the Edge meta tag overrules the user's setting, and forces IE into its normal mode. You can check this by asking for the mode: alert(document.documentMode). – Biestings

I just tested this in my IE9/Windows7 VM. When entering document.documentMode into the console, it returns "9" in both standard and compatibility mode, so this isn't a reliable way to detect compatibility mode only, unfortunately. – Nagy

Answer 3

IE7 doesn't contain any information on Trident

User-Agent : Mozilla/4.0 (compatible; MSIE 7.0)

IE8 contains this string: "Trident/4.0"

User-Agent : Mozilla/4.0 (compatible; MSIE 8.0; Trident/4.0)

IE9 contains this string: "Trident/5.0"

IE9 in compatability mode:

User-Agent : Mozilla/4.0 (compatible; MSIE 7.0; Trident/5.0)

IE9 in normal mode:

User-Agent : Mozilla/5.0 (compatible; MSIE 9.0; Trident/5.0)

Indicatory

That's great, does IE10 increment Trident also? – Yolandoyolane

Internet explorer 10 users Trident/6.0....see blogs.msdn.com/b/ie/archive/2012/07/12/… – Yolandoyolane

and IE11 uses Trident/7.0 – Annikaanniken

Answer 4

Here is a table of all Browser and Document modes for IE9:

Dulcet

Any chance you've got an updated one to include IE10 and IE11 ? – Annikaanniken

Answer 5

I'm hoping that IE9 will have some property that exists and is testable regardless of whether it's in 7, 8 or 9 mode.

Check e.g. for style.opacity, it was introduced in IE9 and is available regardless of the compatibility-mode:

<![if IE]> 
<script>
if(typeof document.documentElement.style.opacity!='undefined')
{
  //this must be at least IE9 
}
</script>
<![endif]>

Michamichael

Thanks Dr.Molle, I'll give that a try and report back. – Annikaanniken

Unfortunately that only works for Browser Mode (the left-hand drop-down in IE9 developer tools). It doesn't work for Document mode (the right-hand drop down). For document mode, it only works in IE9 document mode. If it's in IE8, IE7 or Quirks mode, that logic fails. – Annikaanniken

Damn, your right. I found another property, works for me in every mode: window.performance – Michamichael

@Dee2000: It works for me with DocumentMode as well. I.e. ONLY if DocumentMode = "Internet Explorer 9 standard" does this test succeed. – Piglet

@Michamichael thanks for this, window.performance does the job nicely. – Scintillometer

Answer 6

It is sometimes necessary to read the user Agent string from server Variable, not from javascript navigator object.

Compare the differences:

• ASP classic, IE11

  • client javascript, navigator.userAgent: "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; BOIE9;ENUS)"

  • server ASP, Request.ServerVariables("HTTP_USER_AGENT"): "Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; BOIE9;ENUS; rv:11.0) like Gecko"

• ASP classic, IE11 Compatibility mode:

  • client javascript, navigator.userAgent: "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; BOIE9;ENUS))"

  • server ASP, Request.ServerVariables("HTTP_USER_AGENT"): "Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; BOIE9;ENUS)"

Optician

Answer 7

From https://mcmap.net/q/243004/-determining-why-a-page-is-being-renderred-in-compatibility-mode

Assuming you have a hidden element with the ID compat-warning:

Javascript w/ jQuery:

$(function(){
    function showCompatWarning() {
        $('#compat-warning')
            .css('display','block')
            .css('height','auto')
            .show();
    }
    var tridentOffset = navigator.appVersion.indexOf('Trident/');
    if ( tridentOffset === -1 ) return;
    var jscriptVersion = 0;
    /*@cc_on @*/
    /*@if (@_jscript) jscriptVersion = @_jscript_version ; @*/;
    /*@end @*/
    var tridentVersion = parseInt(navigator.appVersion.substr(tridentOffset+8),10);
    var guessIEVersion = tridentVersion + 4;
    if (( document.documentMode && jscriptVersion && jscriptVersion < 10 && jscriptVersion !== document.documentMode ) ||
        ( document.compatMode && document.compatMode === 'BackCompat') ||
        ( document.documentMode && document.documentMode < 10 && document.documentMode != guessIEVersion ))
        showCompatWarning();
});

Detection and warnings, your first and last lines of defense against compatibility hell.

Kneecap