Defining document compatibility (source)
Document compatibility defines how Windows Internet Explorer renders your webpages. Like other popular browsers, Windows Internet Explorer supports document compatibility modes that affect the way webpages are interpreted and displayed. These modes, also called document modes, allow you to choose between support for the latest standard or support for certain behaviors popularized by older browsers. Here you’ll learn about the document compatibility modes supported by Internet Explorer and other popular browsers, and how to specify the document mode for a webpage.
The document mode of a webpage is determined by its document type, which is specified using a <!DOCTYPE> directive.
See more in source: http://msdn.microsoft.com/en-us/library/cc288325%28VS.85%29.aspx
Specifying legacy document modes (source)
Understanding legacy document modes
When using the
X-UA-Compatible header to restrict a webpage to a legacy document mode, use one of the following values:
- A value corresponding to a specific document mode, such as IE9 mode, IE8 Standards mode, or IE7 Standards mode. To do so, use one of the following declarations:
<meta http-equiv="x-ua-compatible" content="IE=9" > <meta http-equiv="x-ua-compatible" content="IE=8" > <meta http-equiv="x-ua-compatible" content="IE=7" >
By using one of these values, you’re restricting the webpage to the standards mode of the corresponding version of Internet Explorer.
- In certain cases, you might want Internet Explorer to use the document type declaration to either restrict a webpage to a specific standards mode or to use a document mode representing a much older version of the browser, such as Internet Explorer 5.5.To do so, specify one of the following values, depending on your desired standards mode:
<meta http-equiv="x-ua-compatible" content="IE=EmulateIE9" > <meta http-equiv="x-ua-compatible" content="IE=EmulateIE8" > <meta http-equiv="x-ua-compatible" content="IE=EmulateIE7" >
(This setting is useful in cases where you might have a collection of webpages that use different values for the doctype directive.)With these settings, the page is displayed either in the standards mode corresponding to the version you specified or it’s displayed in IE5 (Quirks) mode.
- For testing purposes, you can also use the following value to display the webpage in the highest standards mode supported by Internet Explorer.
<meta http-equiv="x-ua-compatible" content="IE=edge" >
Note Edge mode is intended for testing purposes only; do not use it in a production environment.
Because it forces all pages to be opened in standards mode, regardless of the version of Internet Explorer, you might be tempted to use this for all pages viewed with Internet Explorer. Don’t do this, as the
X-UA-Compatibleheader is only supported starting with Windows Internet Explorer 8.
Tip If you want all supported versions of Internet Explorer to open your pages in standards mode, use the HTML5 document type declaration, as shown in the earlier example.
The need to restrict a webpage to a legacy document mode usually occurs because the webpage is designed to support a given version of a browser or relies on older features that are no longer supported by the browser. Use legacy document modes only temporarily to allow your pages to be viewed while you update those pages to support current standards and practices.
See more in source: http://msdn.microsoft.com/en-us/library/jj676915%28v=vs.85%29.aspx
Investigating Document Mode Issues (source)
Displaying Webpages in Different Document Modes
To use the F12 tools to display webpages in different document modes, complete the following steps.
- If the F12 tools are not already open, press F12 to open the tools. Notice that the current document mode is displayed in the right side of the menu bar of the F12 tools window.
- When you click the document mode menu button, a menu displays additional document modes that can be used to display your webpage.
- Click the Internet Explorer 9 standards option from the menu to display your webpage in IE9 mode. If you trace the style attributes for the previously selected object, the border-radius child attributes now appear with the other CSS attributes.
- When the webpage is displayed in the appropriate document mode, the webpage appears as intended and the div elements are displayed with rounded corners.
See more in source: http://msdn.microsoft.com/en-us/library/gg699340%28v=vs.85%29.aspx