Internet Explorer (IE) – Defining, Investigating and Specifying document compatibility

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-Compatible header 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.

  1. 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.The document mode of a webpage is displayed near the upper corner of the F12 developer tools window
  2. When you click the document mode menu button, a menu displays additional document modes that can be used to display your webpage.Click the document mode control to display a menu of additional document modes available for your webpage.
  3. 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.The Internet Explorer 9 standards command displays a webpage in IE9 Standards mode.
  4. When the webpage is displayed in the appropriate document mode, the webpage appears as intended and the div elements are displayed with rounded corners.The corners are rounded when the webpage is displayed in IE9 Standards mode.

See more in source: http://msdn.microsoft.com/en-us/library/gg699340%28v=vs.85%29.aspx

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s