use the x-ua-compatible header to restrict a webpage to document modes

<html>
<head>
  <!-- Use Internet Explorer 9 Standards mode -->
  <meta http-equiv="x-ua-compatible" content="IE=9">
  <title>My webpage</title>
</head>
<body>
  <p>Content goes here.</p>
</body>
</html> 

This example uses a meta element to include an X-UA-Compatible header, which directs Internet Explorer to display the webpage in IE9 Standards mode, effectively limiting the webpage to the features supported by Windows Internet Explorer 9.

When reviewing these results, keep the following points in mind: 

  • If a webpage specifies a doctype directive and includes an X-UA-Compatible header, the header takes precedence over the directive.
  • If the browser supports the header, but not any of the specified document modes, it will use the highest supported document mode to display the webpage.
  • Older versions of the browser that don't support the header use the <!DOCTYPE> to determine the document mode.
  • Internet Explorer 9 and earlier versions display webpages without <!DOCTYPE> directives in IE5 (Quirks) mode. As a result, we recommend all webpages specify a <!DOCTYPE> directive, such as the HTML5 doctype.

This flexibility allows the greatest compatibility for earlier versions of Internet Explorer that remain popular. For more info, see Understanding the need for document compatibility modes.

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.

If you decide to specify the document mode for a webpage, do so deliberately, for example:

 

  • Test the webpage in as many versions of Internet Explorer as you can, including new versions as they are released.
  • Set the content value of the X-UA-Compatible header to reflect the specific versions of Internet Explorer supported by your webpage, for example, the ones you've tested.
  • Don't set the content value to support versions of Internet Explorer that you haven't specifically tested with your webpage.

If you don't have time or resources to perform this testing, avoid setting the document mode. Only set the document mode when you have a specific business reason to do so. For more info, see When to use legacy document modes.

 

Specifying multiple content attribute values

<meta http-equiv="X-UA-Compatible" content="IE=7,9,10" >

configure the configuration on server

A web server can also be configured to specify the X-UA-Compatible header. If a web server specifies the header and the header also appears within the content of a webpage, the header in the webpage takes precedence over the one specified by the server.

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <clear />
        <add name="X-UA-Compatible" value="IE=10" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>
</configuration> 

Document modes specified through a web server have a lower precedence than document modes specified in a webpage. Meaning, if your server specifies IE9 Standards mode for a given webpage, but the page contains a meta element that specifies IE8 Standards mode, the webpage will be displayed in IE8 mode by versions of Internet Explorer that support that document mode.

 

posted on 2013-06-18 11:19  @version  阅读(300)  评论(0)    收藏  举报