How to understand IE's document compatibility mode (X-UA-Compatible)?
Internet Explorer supports a variety of document compatibility modes, which can change the rendering of pages accordingly.
IE9 mode supports the full range of established industry standards, including HTML5 (draft), W3C CSS Level 3 specification (draft), SVG 1.0 specification, etc.
<meta http-equiv="X-UA-Compatible" content="IE=9">
IE8 mode supports many established industry standards, the W3C CSS Level 2.1 specification and the W3C Selectors API, with limited support for the W3C CSS Level 3 specification (draft) and other industry standards
<meta http-equiv="X-UA-Compatible" content="IE=8">
IE7 mode forces the browser to render the document in accordance with the IE 7 standard mode, ignoring whether to define instructions
<meta http-equiv="X-UA-Compatible" content="IE=7">
Emulate IE9 mode tells IE to use directives to decide how to render the document. Renders in IE9 in standards mode and IE5 in quirks mode. Unlike IE9 mode, Emulate IE9 mode considers commands
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
Emulate IE8 mode tells IE to use directives to decide how to render the document. Renders in IE8 in standards mode and IE5 in quirks mode. Unlike IE8 mode, Emulate IE8 mode considers commands
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">
Emulate IE7 mode tells IE to use directives to decide how to render the document. Renders in IE7 in standards mode and IE5 in quirks mode. Unlike IE7 mode, Emulate IE7 mode considers directives. This is the preferred compatibility mode for most sites
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
IE5 mode tells IE7 whether to render the document in quirks mode
<meta http-equiv="X-UA-Compatible" content="IE=5">
Edge mode tells IE to render the document in the highest-level mode, that is, any IE version renders in the highest-level standard mode supported by the current version, avoiding the impact of version upgrades. Simply put, what version of IE is used for rendering in standard mode
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Use the following code to force IE to use Chrome Frame rendering
<meta http-equiv="X-UA-Compatible" content="chrome=1">
Prompt IE users to install Google Frame
Google officially provides the detection of the Google Frame plug-in installation. You can directly call the method here. If it is detected that Google Frame is not installed in IE, a dialog box will pop up to prompt the installation.
<script src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script><script>CFInstall.check();</script>
The best compatibility mode solution considers the above two:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
.