IE browser compatibility mode

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.