A recent support for the company's internal business management system, the system is based on jquery, and the 2-year MVVM framework I turned to this completely using the jquery framework for the development of the system, it is quite uncomfortable (I believe that using the MVVM framework is the same feeling); , IE's pro-dad Microsoft has given up support ie6-10, the system altogether also only support the use of IE browser (operating computer installation is IE8 browser, so most IE8), other advanced browsers are not supported (of course, this is due to the system using some IE-based plugins caused).
But then again, in the development of the support system, it is very confusing to see the meta-configuration value of x-ua-compatible, which also misses its own knowledge about the browser compatibility view. To this end through the access to data on the IE document Compatibility model has a certain understanding, although these things will gradually exit the historical stage.
1. Introduction to Browser Compatibility
Historical Origins
Before the introduction of the World Wide Web browser era, Microsoft's Internet Explorer series and Netscape browser, their pages are two completely different implementations, Web pages to be compatible with two sets of code must be implemented, for developers, this is more painful, and is not conducive to standardization and popularization. The company has developed a set of standard specifications, although the initial two companies may not enforce these standards, after all, people have a large market share, a small organization can NAI me, but for the future standardization of a set of norms. After the introduction of the website, the previously developed pages in the standard mode can not be used, due to the existence of a large number of specifications developed before the page is still in service, in order to be compatible with the previous use of the old page, this has a browser compatibility;
three different modes
Browser compatibility first appeared in the IE6 browser to be compatible with the previous page display. It has two modes of IE6 Standard mode and IE5.5 's weird mode, in which the odd mode is compatible with previous old pages. So browsers generally have several modes? According to this article "activating Browser Modes with Doctype", it is accurate that the following three modes:
- Standard mode: Performs the corresponding HTML, CSS, and JS behavior according to the standards set by the standards.
- Quasi-standard mode (almost standards mode): Most of them are standard mode, only a small part of it behaves as a bizarre behavior.
- Quicks mode: According to the behavior of Netscape 4 and IE5.5
Although the browser has the above three modes, but it is important to note that we are talking about the standard mode and the odd mode, according to activating Browser Modes with DOCTYPE, different doctype may lead to different patterns. It is also necessary to add that the standard mode is not entirely standard. Due to the different stages of the browser vendor implementation standard, there is a big difference between the standard modes of each browser.
The browser distinguishes between standard and weird patterns, so how do you tell which mode the current document is in?
Use IE to determine the Compatmode attribute provided by document, as shown in the following table. Subsequent other standard browsers also implement this property to detect what mode the document is in;
Compatmode value |
Document mode |
Css1compat |
Standard mode |
Backcompat |
Weird mode |
Later, from IE8, the document was provided with a Documentmode attribute, it is not as broad as compatmode to get the results, but can be specifically detected in the current Internet Explorer version of the page specific file rendering mode. There are 3 modes under IE8:5 (Weird mode), 7 (IE standard mode), 8 (IE8 standard mode). However, other standard browsers do not implement this property.
In addition, if the document does not contain DOCTYPE or unrecognized doctype (except for the x-ua-compatible configuration described below, whose configuration value is ie5-11 will ignore DOCTYPE), then the browser will go into the weird mode.
2. Browser mode and document mode
These two concepts are related to browser compatibility, in Compatibility View or under the Developer toolbar, you will see browser compatibility and document mode. For example, browser mode and document mode under the developer tools of the native IE9 browser
- Browser mode: used to toggle IE's default document mode for the current document , Parsing of conditional annotations for different versions of the browser , Browser The value that determines the useragent of the request header .
- Document mode: determines the document's typesetting engine and JS engine .
In the developer tool to switch between different browser mode, the corresponding default document mode is the value of the current browser mode, such as ie7-9 browser mode corresponding to the document mode ie7-9 standard;
Also, note that the default document mode corresponding to the Ie8-9 compatibility mode is the IE7 standard. For example, the following code is IE7 document mode in the compatibility mode for browser mode:
1 <!DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD">2 <HTML>3 <Head>4 <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" />5 <title>Test</title>6 </Head>7 <Body>8 <!--[If IE 6]>9 <span style= "color:red" >this is ie6</span><br/><br/>Ten <! [EndIf] - One <!--[If IE 7]> A <span style= "color:red" >this is ie7</span><br/><br/> - <! [EndIf] - - <!--[If IE 8]> the <span style= "color:red" >this is ie8</span><br/><br/> - <! [EndIf] - - <!--[If IE 9]> - <span style= "color:red" >this is ie9</span><br/><br/> + <! [EndIf] - - </Body> + </HTML>
different document mode, its Documentmode value is different, according to the above section, through Documentmode can specifically get the current browser's document rendering mode, such as IE9 under the document mode is:
document mode |
documentmode |
weird mode |
5 |
ie7 standard |
7 |
IE8 standard |
8 |
IE9 standard |
9 |
As you can see, there is no IE6 document mode in ie8+ after the browser version of compatibility mode.
3. The document compatibility mode of IE browser
The above describes the IE Browser mode switch will change the default document mode of the page, but whether you can specify the document mode of the page, this is of course, this article, "Define document compatibility, let IE according to the specified version of the resolution of our page" explained very thoroughly Specifically, the meta-configuration of the x-ua-compatible that needs to be supported by IE8, and a different value is configured for the x-ua-compatible, and the Web page is executed according to the specified document mode and the corresponding JS engine, which means The compatibility mode of IE browser is turned on. For example, specify the following configuration for Web pages to render in IE8 Standard mode:
<http-equiv= "x-ua-compatible" content= "ie=8">
In addition to the above x-ua-compatible configuration values, there are additional configuration values, as follows:
x-ua-compatible Value |
Description |
Ie=5 |
Let the browser use Quirks mode to show that the content is actually displayed using the Quirks mode of Internet Explorer 7, which is very similar to IE5. |
Ie=edge |
This setting allows IE to use the current highest version for document parsing, and official documentation indicates that the edge mode is only available in the test environment and is not recommended for use in a production environment |
Ie=7 |
Use standard IE7 to handle |
Ie=emulateie7 |
Analog IE7 to process, follow <! doctype> directive, if the document has a valid <! currently Doctype> using IE7 mode, no one uses Quirks mode (Internet Explorer 5 Quirks), which is the preferred compatibility mode for most Web sites |
Ie=8 |
Standard IE8 |
Ie=emulateie8 |
Analog IE8, follow <! Doctype> instructions, refer to IE=EMULATEIE7 instructions |
Ie=9 |
Standard IE9 |
Ie=emulateie9 |
Analog IE9, follow <! Doctype> instructions, refer to IE=EMULATEIE7 instructions |
Chrome=1 |
Forcing Chrome to work requires chrome plugin support under IE |
Ie=emulateie10 |
Analog IE10, follow <! Doctype> instructions, refer to IE=EMULATEIE7 instructions |
ie=10 |
Standard IE10 |
It is important to note that if you set the value to another table value, then IE will attempt to convert the value to the closest browser version.
<http-equiv= "x-ua-compatible" content= "ie=7.5"> <!-- -
The client can change the browser's document mode by setting the meta x-ua-compatible value, and the server side can also change the browser's document mode. The service can change the document mode of the current Web page by setting the value of x-ua-comptible to the response value in the response header response header.
In this way, the server can also specify the document mode of the Web page; The personal feeling is relatively flexible, and can be set according to the different browsers to the corresponding document mode.
In addition, the IE developer tool and IE browser compatibility view of the list configuration, etc. can change the browser's document mode.
4, determine the Internet Explorer Document mode priority
Anyway, since there are 4 ways to change the browser's document mode in the previous section, what is the higher priority? This can be referred to in the above article "about browser mode and text mode of confusion" in the two pictures to illustrate.
The order of precedence of the document mode under IE9 is as follows:
The document mode priority of IE8 is as follows:
As you can see from the IE8, 9 document mode diagram above:
- IE8, 9 browser compatibility mode by default, the use of IE7 emulation mode as a document mode;
- The Compatibility View configuration also defaults to IE7 emulation mode as the document mode.
Therefore, theIE7 emulation view is the preferred compatibility method when older pages are compatible.
Reference:
1. In-depth understanding of browser compatibility mode
2. Confusion about browse mode and text mode
3. Define document compatibility
4, define the document compatibility, let IE according to the specified version of the resolution of our page
5. Activating Browser Modes with Doctype
IE browser compatibility mode