Let IE choose display mode based on HTML header tag

Source: Internet
Author: User
Tags html header website server

File compatibility is used to define how IE compiles your Web pages. This file explains file compatibility, how to specify the file compatibility mode for your site, and how to determine which file mode a Web page uses.


To help ensure that your pages have a consistent look in all future versions of IE, IE8 introduces file compatibility. Introducing an additional compatibility mode in IE6, file compatibility allows you to choose a specific compilation mode when IE renders your Web page.
The new IE to ensure that the Web page in future versions will have a look, IE8 introduced file compatibility. When you introduce an additional compatibility mode,
This article explains the need for file compatibility, lists the file compatibility patterns that existing versions of IE can use, and demonstrates how to select specific compatibility modes.

Understanding the need for file compatibility

Each major version of IE has been added to make the browser easier to use, increase security, and support industry standards. With these as the characteristics of IE, one of the risks is that the old version of the site can not be displayed correctly.

To minimize this risk, IE6 allows Web developers to choose how IE compiles and displays their Web pages. "Quirks mode" is a preset, which causes the page to be displayed in the previous version of the browser's viewpoint, and "Standards Mode" (also known as "strict Mode") features the most complete support for industry standards. However, to take advantage of this enhanced support feature, the Web page must contain the appropriate <! doctype> instructions.

If a webpage does not contain <! doctype> instruction, IE6 will display it as quirks mode. If the page contains a valid <! doctype> Instruction But the browser is not recognizable, IE6 will display it as IE6 standards mode. Because a few sites already contain <! doctype> instructions, the switch to compatibility mode is quite successful. This allows web developers to choose the best time to transfer their pages to standards mode.

As time passed, more websites started using standards mode. They are also beginning to use IE6 's features and functions to detect ie. For example, IE6 does not support universal selector (that is, the CSS global selector * {}), some websites use it to do specific correspondence for IE.

When IE7 adds support for a global selector, sites that rely on IE6 features will not be able to detect this new version of the browser. Therefore, those specific correspondence to IE cannot be applied to IE7, resulting in these sites not being displayed as they intended. Since <! Doctype> only supports two compatibility modes, and the affected site owners are forced to update their website to support IE7.

IE8 has more support for industry standards than any previous version of the browser, so pages designed for older browsers may not render as expected. To help alleviate all problems, IE8 introduces the concept of file compatibility, allowing you to select the specific IE version of your Web page design to correspond to. File compatibility adds some new patterns to the IE8 that tell the browser how to parse and compile a Web page. If your page does not display correctly in IE8, you can update your site to support the latest page standards (preferences) or add a META element to your page to tell IE8 how to compile your page in accordance with the previous version of the browser.

This gives you the option to update your site to support IE8 new features.

Understanding file Compatibility Mode

IE8 supports several file compatibility modes, which have different characteristics and affect the way content is displayed.

emulate IE8 mode indicates IE uses <! Doctype>   directives to determine how content is compiled. The Standards Mode command is displayed as IE8 standards mode and quirks mode is displayed as IE5 mode. Unlike IE8 mode,emulate IE8 mode values the <! Doctype>   directives.  
emulate IE7 mode indicates IE uses <! Doctype>   directives to determine how content is compiled. The Standards Mode command is displayed as IE7 standards mode and quirks mode is displayed as IE5 mode. Unlike IE7 mode,emulate IE7 mode values the <! Doctype>   directives. This is the most recommended compatibility mode for many Web pages.  
ie5 mode compiles like IE7 quirks mode, and is very similar to what is shown in IE5.  
IE7 mode compiles the contents as IE7 standards mode, regardless of whether the Web page contains <! Doctype>   directives.  
IE8 mode provides the highest support for industry standards, including the cascading Style Sheets Level 2.1 specification and the selectors API, and limited support for the Casca Ding Style Sheets Level 3 specification (working Draft).  
edge mode instructs IE to display content in the highest mode currently available. When using IE8, it is equivalent to IE8 mode. if (assuming) future releases of IE that support a higher compatibility mode, pages using edge mode will display content using the highest mode supported by that version. The same pages will still be displayed as usual when browsing with IE8.

Because edge mode uses the highest mode supported by the IE version to display the content of the Web page viewed, it is recommended to use only the test page and other non-commercial pages.

Specify file compatibility mode

To specify a file mode for your Web page, you need to use the meta element in your Web page to put the x-ua-compatible http-equiv header. The following is a sample designation for emulate IE7 mode compatibility.

< HTML >
< head >
<!--Mimic Internet Explorer 7--
< meta HTTP-EQUIV = "x-ua-compatible" content = "Ie=emulateie7"/>
< title > My Web Page </title >
< BODY >
< p > Content goes here. </p >
</Body >
</HTML >

Its contents change with the specified page mode, when you want to simulate IE7, specify ie=emulateie7 , specify ie=5 , ie=7 , or ie=8 to select one of the compatibility modes. You can also specify Ie=edge to instruct IE8 to use the highest mode it supports.

The x-ua-compatible header is not case-sensitive. However, in addition to the title element and other meta elements, it must appear before other elements in the header section of the Web page.

Setting up a Web server to specify a preset compatibility mode

Site administrators can define a custom header for the site to preset a specific file compatibility mode for their site. This particular method depends on your Web server. For example, the following Web. config file enables Microsoft Internet information Services (IIS) to define a custom header to automatically compile all pages using IE7 mode.

<? XML version= "1.0" encoding= "Utf-8"?>
< configuration >
< system.webserver >
< Httpprotocol >
< Customheaders >
< clear/>
< add name = "X-ua-compatible" value = "Ie=emulateie7"/>
</customheaders >
</system.webserver >
</configuration >

If you have specified a preset file compatibility mode on the site server, you can specify a different file compatibility mode on individual pages to cover it. The mode precedence specified in the Web page is higher than the mode specified in the server.

Please check your website server for information on specifying a custom header, or read more:

Implementing the META Switch on Apache
Implementing the META Switch on IIS

Determine file compatibility mode

To determine the file compatibility mode for Web pages using IE8 browsing, use the Documentmode feature of document object. For example, enter the following code in the IE8 URL column to display the file mode of the current page.

Javascript:alert (Document.documentmode);

The documentmode function will return a value corresponding to the current page of the file compatibility mode, for example, if the page is designated to support IE8 mode,Documentmode will return the value "8 ".

The Compatmode feature introduced in IE6 does not support the Documentmode feature introduced in IE8. Applications that are currently built using Compatmode can also function in IE8, but they must be updated to use Documentmode.

If you want to use JavaScript to determine the compatibility mode of a file, the code that introduces the following example can support older versions of IE.

engine = NULL;
if (Window.navigator.appName = = "Microsoft Internet Explorer")
This is an IE browser. What's the engine in?
if (Document.documentmode)//IE8
engine = Document.documentmode;
else//IE 5-7
engine = 5; Assume quirks mode unless proven otherwise
if (Document.compatmode)
if (Document.compatmode = = "Css1compat")
engine = 7; Standards Mode
The engine variable now contains the document compatibility mode.

Understanding Content Property Values

The value of the content property is resilient when it receives a value that is different from the previously described values. This will give you more control over how IE displays your Web pages. For example, you can set the Content property value to ie=7.5. When you do this, IE attempts to convert this value to version vector and select the closest result. In this example, IE will set it to IE7 mode. The following example shows the state of the pattern set to another value.

< meta HTTP-EQUIV = "x-ua-compatible" content = "ie=4" > <!--IE5 mode--
< meta HTTP-EQUIV = "x-ua-compatible" content = "ie=7.5" > <!--IE7 mode--
< meta HTTP-EQUIV = "x-ua-compatible" content = "ie=100" > <!--IE8 mode--
< meta HTTP-EQUIV = "x-ua-compatible" content = "Ie=a" > <!--IE5 mode--

<!--this header mimics Internet Explorer 7 and uses
<! Doctype> to determine what to display the Web page--
< meta HTTP-EQUIV = "x-ua-compatible" content = "Ie=emulateie7" >

Note: The previous example shows a separate content value. In fact, IE only executes the first x-ua-compatible header in a webpage.

You can also use content properties to specify the file compatibility mode of complex numbers, which can help ensure that your pages will be displayed consistently in future browser versions. To set the file mode of a complex number, set the content properties to determine which mode you want to use. Use semicolons to separate each pattern.

If a specific version of IE support requires more than one compatibility mode, it will be used in the highest available mode listed in the header content properties. You can use this feature to exclude specific compatibility modes, although this is not recommended. For example, the following header excludes IE7 mode.

< meta HTTP-EQUIV = "x-ua-compatible" content = "ie=5; Ie=8 "/>


Compatibility is a very important concern for web designers. While it is best to build a website that does not depend on any Web browser features or functionality at all, it is sometimes impossible to implement. File compatibility mode restricts Web pages to a specific version of IE.

Use the x-ua-compatible header to specify the version of IE that your page supports. Use Document.documentmode to determine the compatibility mode of the page.

By choosing to support a specific version of IE, you can ensure that your page will also show consistency in future browser versions.


Let IE choose display mode based on HTML header tag

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.