Blog Objective

This is a blog that attempts to make life easier by noting down the author's accrued knowledge and experiences.
The author has dealt with several IT projects (in Java EE and .NET) and is a specialist in system development.

14 January 2012

HTML rendering with Internet Explorer 8, 9, 9+

Apart from the use of DOCTYPE, IE uses other metadata to influence rendering.

You may include the following meta tag in the HMTL document to influence the way Internet Explorer renders content:

<meta http-equiv="X-UA-Compatible" content="Content-Attrib-Value"/>

In combination with the DOCTYPE, the value of the content attribute in the above meta tag will result in different rendering modes:

Content-Attrib-Value DOCTYPE Doc Mode
IE=edge Ignored IEx standards
(use the latest IE standard available)
IE=9 Ignored IE9 standards
IE=8 Ignored IE8 standards
IE=EmulateIE8 Known type IE8 standards
  Unknown or absent Quirks mode (IE5.5)
IE=7 Ignored IE7 standards
IE=EmulateIE7 Known type IE7 standards
  Unknown or absent Quirks mode
IE=5 Ignored Quirks mode

At the same time, there are some interesting points to note:

  1. in the intranet zone, IE 7 standards rendering mode is used by default
  2. these can be overridden by the Compatibility View Settings
  3. these can also be overridden by domain name blacklisting (by Microsoft) 
  4. the above may be done using HTTP header or META tags
  5. a page can be forced into compatibility mode by a framing page already in compatibility mode
  6. if there is any non-XML-prolog before the doctype declaration, Quirks mode will be automatically used

The order of precedence for mode selection by IE 8 and 9 appears to be:

  1. X-UA-Compatibility
    1. meta tag (embedded in HTML document)
    2. HTTP header (sent by web server)
  2. DOCTYPE
  3. Compatibility View settings (EmulateIE7 mode if X-UA-Compatibility is not used)
    1. Render all website in compatibility view
    2. Render intranet website in IE7
    3. Blacklisted domain
    4. Domain set locally as compatibility view
  4. Framed by compatibility-view page

A simple detection code (for IE) in Javascript follows:

<script>
var __IE__ = false;
var __ENGINE__ = null;
/*@cc_on
   @if ( @_jscript_version >= 5.7 )
      __IE__ = true;
   @elif ( @_jscript_version == 5.6 )
      __IE__ = 6;
   @else
      __IE__ = 1;
   @end
@*/
if ( __IE__ === true) {
   var elem = document.createElement('div');
   elem.innerHTML = '<!--[if IE 7]><div class="ie7"></div><![endif]--><!--[if IE 8]><div class="ie8"></div><![endif]-->';
   __IE__ = parseInt(elem.firstChild.className.substring(2), 0);
   elem = null;
   // This is an IE browser. What mode is the engine in?
   if (document.documentMode) // IE8 or later
      __ENGINE__ = "IE" + document.documentMode;
   else // IE 5-7
   {
      __ENGINE__ = "5"; // Assume quirks mode unless proven otherwise
      if (document.compatMode)
      {
         if (document.compatMode == "CSS1Compat")
            __ENGINE__ = "IE" + 7; // standards mode
      }
      // There is no test for IE6 standards mode because that mode  
      // was replaced by IE7 standards mode; there is no emulation.
   }
}
// display
if (__IE__ == false)
   alert("Browser is non-IE");
else
   alert("Browser is IE" + __IE__ + " using " + __ENGINE__ + " rendering mode");
</script>

Some references are included:


http://msdn.microsoft.com/en-us/library/dd565650(v=vs.85).aspx
http://msdn.microsoft.com/en-us/library/cc288325%28v=vs.85%29.aspx
http://farukat.es/journal/2009/05/245-ie8-and-the-x-ua-compatible-situation
http://farukat.es/journal/2009/05/250-ie8-x-ua-compatible-solutions
http://hsivonen.iki.fi/doctype/#ie8modes