Share via

Interoperable (HTML5) quirks mode

  • Article

In Internet Explorer 10, we've modified the default behavior of quirks mode to improve support for industry standards, such as HTML5, and to increase interoperability with other browsers. Quirks mode now exposes the same set of APIs and behavior as standards mode with limited exceptions as defined in HTML5 and related W3C specifications.

These changes can impact quirks mode pages written exclusively for Windows Internet Explorer or that use browser sniffing to alter their behavior in Internet Explorer.

A page using legacy features worked as intended in Windows Internet Explorer 9, but no longer works in Internet Explorer 10.

Note  The F12 developer tools can be used to verify the document mode of a webpage. For more info, see Investigating Document Mode Issues.

 

If the page works correctly in other browsers, consider using feature detection to treat Internet Explorer 10 like other browsers. Otherwise, add the following meta tag near the top of the page to enable legacy quirks behavior:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">

The following example shows a webpage that uses an element behavior, a legacy feature that is no longer supported in Internet Explorer 10 standards mode:

<html>
  <head>
    <title>Legacy Quirks Page</title>
  </head>
  <body>
    <div style="left:expression(document.body.clientWidth/2)">
    </div>
  </body>
</html>

Because the page doesn't declare a document type, it's displayed in Quirks mode. In earlier versions of Internet Explorer, this meant that the page would be displayed as if it were viewed by a much earlier version of the browser. Consequently, the element behavior worked and the page displayed correctly.

Because Quirks mode has been modified, this example no longer displays correctly. This can be fixed by enabling legacy Quirks mode:

<html>
  <head>
    <title>Legacy Quirks Page</title>
    <meta http-equiv="X-UA-Compatible" content="IE=5">
  </head>
  <body>
    <div style="left:expression(document.body.clientWidth/2)">
    </div>
  </body>
</html>

For best results, webpages that currently depend on legacy features should be changed to use modern features defined by widely supported standards.

IEBlog Post: Interoperable HTML5 Quirks Mode in IE10

How to Detect Features Instead of Browsers

Defining Document Compatibility

Internet Explorer 10 Compatibility Cookbook