IE11 Migration Guide: Understanding Browser Mode, Document Mode, User-Agent and X-UA-Compatible


 

Browser Mode determines the User-Agent that Internet Explorer sends to servers and the document mode Internet Explorer defaults to. This article is going to explain the relationship between them in detail.

Browser Mode

Internet Explorer sends different User-Agent strings in different browser modes. Internet Explorer 8, 9 and 10 have two kinds of browser mode: Default Mode and Compatibility View Mode. IE11 has an extra browser mode: Enterprise Mode though browser mode option was removed in IE11 F12 developer tool.

clip_image002

Default Mode

In Default Mode, the User-Agent strings of Internet Explorer 8, 9 and 10 contain compatible (“compatible“) token and browser (“MSIE“) token with the version number to declare themselves.

To prevent IE11 from being (incorrectly) identified as an earlier version, the compatible (“compatible“) and browser (“MSIE“) tokens have been removed from IE11’s User-Agent. The version of the browser is now reported by a new revision (“rv“) token and the “like Gecko” token has been added (for consistency with other browsers).

IE versions

User-Agent

Internet Explorer 8

Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0)

Internet Explorer 9

Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)

Internet Explorer 10

Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; Trident/6.0)

Internet Explorer 11

Mozilla/5.0 (Windows NT 6.1; Trident/7.0; rv:11.0) like Gecko

Different operating systems might cause subtle User-Agent differences.

Compatibility View Mode

In Compatibility View mode, the User-Agent string contains “MSIE 7.0” token and the Trident engine version of current browser. If you find the User-Agent of IE8, IE9 or IE10 contains “MSIE 7.0“, it indicates current page is displayed in Compatibility View. The User-Agent also contains “MSIE 7.0” in IE11 Compatibility View, however IE11 Enterprise Mode can do this too.

IE versions

User-Agent

Internet Explorer 8 Compatibility View

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; Trident/6.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0)

Internet Explorer 9 Compatibility View

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0)

Internet Explorer 10 Compatibility View

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0)

Internet Explorer 11 Compatibility View

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0)

Different operating systems might cause subtle User-Agent differences.

Document Mode

Document Mode defines how Internet Explorer renders your webpages. Each version of IE contains all previous document modes to ensure backward compatibility. Different document modes support different web standards and features. For instance, the CSS3 property: opacity is only supported in IE9 or higher document mode and the let statement in ECMAScript 6 is only supported in IE11 document mode. Internet Explorer uses several criteria to determine which document mode to use, browser mode plays an important role in default document mode selection.

Internet Explorer 7, 8 and 9 default mode

Internet Explorer 7, 8 and 9 will use the highest supported document mode of current browser if the page contains a “<!DOCTYPE>” declaration, otherwise it will use IE5 Quirks document mode.

Internet Explorer 10, 11 default mode

Internet Explorer 10 and Internet Explorer 11 will use the highest document mode no matter the page has a “<!DOCTYPE>” declaration or not. That said, Internet Explorer 10 will use IE10 document mode and Internet Explorer 11 will use IE11 document mode.

Compatibility View mode

Compatibility View will make IE to simulate IE7’s behavior in default document mode selection. Internet Explorer will use IE7 document mode if the page contains a “<!DOCTYPE>” declaration, otherwise it will use IE5 Quirks document mode.

X-UA-Compatible

Browser mode only determines the default document mode selection. If current page contains X-UA-Compatible meta tag or X-UA-Compatible HTTP response header, the document mode selection would be entirely different. X-UA-Compatible is often used to force a page to be displayed in a specific browser mode or document mode, it gives the web developer the ability to control the document mode for rendering the page.

How to use X-UA-Compatible

X-UA-Compatible can be implemented by either of following two methods.

1. Insert it as a meta tag into the header of the webpage (the HEAD section) before all other elements except for the title element and other meta elements.

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
...
</head>
<body></body>
</html>

2. Configure it as an HTTP response header as below.

HTTP header name: X-UA-Compatible

HTTP header value: IE=Edge

Cheat Sheet

The following table lists all available values for X-UA-Compatible and corresponding effects.

Value

Effect

IE=5

Use IE5 Quirks document mode

IE=EmulateIE7

Use IE7 browser mode to determine the document mode:
Use IE7 document mode (if a valid <!DOCTYPE> declaration is present)
Use IE5 Quirks document mode (otherwise)

IE=7

Use IE7 document mode

IE=EmulateIE8

Use IE8 browser mode to determine the document mode:
Use IE8 document mode (if a valid <!DOCTYPE> declaration is present)
Use IE5 Quirks document mode (otherwise)

IE=8

Use IE8 document mode

IE=EmulateIE9

Use IE9 browser mode to determine the document mode:
Use IE9 document mode (if a valid <!DOCTYPE> declaration is present)
Use IE5 Quirks document mode (otherwise)

IE=9

Use IE9 document mode

IE=EmulateIE10

Use IE10 document mode

IE=10

Use IE10 document mode

IE=EmulateIE11

Use IE11 document mode

IE=11

Use IE11 document mode

IE=edge

Use the highest supported document mode of the browser
IE8: IE8 document mode
IE9: IE9 document mode
IE10: IE10 document mode
IE11: IE11 document mode

Priority

X-UA-Compatible has higher priority than default mode and compatibility view mode, but lower than:

  1. The document mode that is specified from F12 developer tool.
  2. IE11 Enterprise Mode

The X-UA-Compatible meta tag takes precedence if it coexists with an X-UA-Compatible HTTP response header.

Usage scenarios

To implement X-UA-Compatible, we need to either modify the website code or configure the web server. As web developers usually have better understanding than IT administrator on which document mode the website should be displayed in, X-UA-Compatible allows developers to directly control the document mode for rendering the webpage. Following are some common scenarios to use X-UA-Compatible.

1. A newly developed internal web application needs to run in IE9 or higher document mode to support some CSS3 and HTML5 features. However, as IE usually automatically assigns internal website to local intranet zone and displays intranet sites in Compatibility View by default, finally IE uses IE5 Quirks document mode or IE7 document mode to render the webpage. In this case, the developer can easily solve the issue by adding X-UA-Compatible header to force IE to use the latest document mode when rendering this website.

2. The developer adds some new pages to a legacy web application, the new pages needs the latest document mode to support HTML5 features, however the legacy pages of the web application still need to run in Compatibility View (IE5 Quirks document mode). In this case, the developer can solve the issue by adding X-UA-Compatible meta tag to only those new pages.

How to detect current document mode?

1. Press F12 to open F12 developer tool and check the document mode at the top right corner.

clip_image004

clip_image006

2. In F12 console, execute script: document.documentMode.

clip_image008

3. In IE address bar, run: javascript:alert(document.documentMode).

clip_image010

How to view the User-Agent that IE sends to the server?

1. Open F12 developer tool, click Network tab, press F5 or click the Start button to start capturing HTTP traffic, type the URL in IE address bar and browse the website, double click the first HTTP entry to view details and you can view the User-Agent in Request header tab.

clip_image012

2. Use third party HTTP capture tools like: HTTPWatch, Fiddler.

References

 

Thanks,

Sheng Jiang from DSI Team


Comments (1)

  1. Nice respond in return of this question with
    real arguments and explaining the whole thing on the topic of that.

Skip to main content