Mike Ormond's Blog

Musings on mobile development and Windows Phone 7 in particular.

IE 8 Compatibility - Meta Tags, Http Headers, User Agent Strings etc etc

IE 8 Compatibility - Meta Tags, Http Headers, User Agent Strings etc etc

  • Comments 6

I've been wrestling with this for a little while now and wanted to try and get down some thoughts so at least I can refer to them in future. Others will hopefully find them useful as well. I'm not going to pre-amble with all the reasons for why we've had to do this in IE8 - there are plenty of other places to go for that background. I'm going to focus on the current state of play in IE8 Beta 2, what happens when you pull certain levers or the user pulls certain levers.

As I see it, there are a few inputs into this equation:

  • Page Developer / Site Owner
    • Valid DOCTYPE (or not)
    • Meta tag in header (or not)
    • HTTP Header (or not)
  • User (ie the person using the browser)
    • Compatibility View enabled (or not)

Let's tackle those one at a time (and because of the dependencies between these things it can be difficult to talk about them in isolation so cut me a bit of slack here):

  • DOCTYPE
    • All other things being equal the presence of a valid DOCTYPE switches the browser into "standards" mode. No DOCTYPE typically means "quirks" mode
  • Meta tag in header
    • Format: <meta http-equiv="X-UA-Compatible" content="IE=......."/>
    • Allows the page developer to specify a particular layout mode (5, 7, EmulateIE7, 8, EmulateIE8, Edge)
    • Affects a single page and trumps the HTTP header
  • HTTP Header
    • Format: X-UA-Compatible: IE=........
    • Allows the site owner to specify a particular layout mode as per the Meta tag
    • Affects all pages in the site and can be overridden by the Meta tag
  • Compatibility View
    • The user has the ability to enable "Compatibility View" for a domain (either by pressing the compatibility view button on a particular page or by enabling it through Compatibility View Settings")
    • All other things being equal, this will switch the browser from IE8 Standards rendering mode to IE7 Standards rendering mode
    • By default, all internet sites display in IE8 Standards Mode (Compatibility View off) while all intranet sites display in IE7 Standards Mode (Compatibility View on). This can be changed from the Tools -> Compatibility View Settings menu.

And clearly, there are a few outputs as well:

  • User agent string (the browser's identity as sent to the web server)
  • Document mode (the actual layout mode the browser is using)
  • The version vector (the version number reported by IE, eg for use in conditional comments)

For a given set of inputs, IE8 Beta 2 will generate a specific set of outputs. I've collated a table which may help us understand what's going on. The vertical axis represents different Meta tag / HTTP header settings while the horizontal axis represents normal vs compatibility view for both valid and invalid / no DOCTYPEs:

 

image

What conclusions did I draw from this:

  • Document / Layout Mode
    • No Meta tag / Header
      • If there is a valid DOCTYPE you will get the highest level of standards layout mode "available"
      • ie either 8 in "normal" mode or 7 in "Compatibility View"
      • Otherwise you get 5 (quirks mode)
    • Meta tag / HTTP header
      • Setting to 5/7/8 - that is guaranteed to be the layout mode IE8 will use
      • Setting to EmulateIEx - you will get layout mode x for a valid DOCTYPE and quirks for invalid / no DOCTYPE
      • ie the same behaviour as IEx
  • User Agent String
    • "Normal" mode - MSIE 8.0 always reported
    • "Compatibility View" - MSIE 7.0 always reported
    • Trident/4.0 always reported irrespective of "Compatibility View" setting
  • Version Vector
    • "Normal" mode - IE8 unless Meta tag / HTTP header overrides with 7 or EmulateIE7
    • "Compatibility View" - IE7 unless Meta tag / HTTP header overrides with 8 or EmulateIE8

All the above was derived empirically using the following HTML page deployed to IIS7. I then simply changed the meta tag, HTTP headers or Compatibility View in the browser to create the matrix:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <!--  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />   -->

  <script type="text/javascript">

    function ShowInfo() {

      var docMode = document.documentMode;
      var uaString = navigator.userAgent;

      document.getElementById("info").innerHTML =
        "Document Mode: " + docMode + "<br />" + "UA String: " + uaString;
    }
    
  </script>
</head>

<body onload="ShowInfo();">
  <div id="info">
  </div>
  <div>
    <!--[if IE]><p>You are using Internet Explorer.</p><![endif]-->
    <![if !IE]><p>
      You are not using an uplevel Internet Explorer version.</p>
    <![endif]>
    <!--[if IE 8]><p>Welcome to Internet Explorer 8!</p><![endif]-->
    <!--[if !(IE 8)]><p>You are not using Internet Explorer8.</p><![endif]-->
    <!--[if gte IE 7]><p>You are using IE 7 or greater.</p><![endif]-->
    <!--[if (IE 5)]><p>You are using IE 5 (any version).</p><![endif]-->
    <!--[if (gte IE 5.5)&(lt IE 7)]><p>You are using IE 5.5 or IE 6.</p><![endif]-->
    <!--[if lt IE 5.5]><p>Please upgrade your version of Internet Explorer.</p><![endif]-->
    <!--[if true]>You are using an <em>uplevel</em> browser.<![endif]-->
    <!--[if false]>You are using a <em>downlevel</em> browser.<![endif]-->
    <!--[if true]><![if IE 7]><p>This nested comment is displayed in IE 7.</p><![endif]><![endif]-->
  </div>
</body>
</html>

There's some interesting support for browser and layout modes in the IE8 Developer Tools but I'll write a separate blog post on that. I've probably missed something out, over-simplified something or in some other way mis-represented what happens. In which case, let me know.

Page 1 of 1 (6 items)