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:
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):
And clearly, there are a few outputs as well:
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:
What conclusions did I draw from this:
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.
PingBack from http://www.easycoded.com/ie-8-compatibility-meta-tags-http-headers-user-agent-strings-etc-etc/
Great article! Clever solution with empirically deriving the outputs. Thank you for publishing this.
To gain a better understanding of compatibility in Internet Explorer 8, below is a list of resources.
I have been running IE8 as my default browser since Beta 2 was released a few months ago and I have been
There are a couple of nice IE8 specific features in Artinsoft’s markup productivity and maintenance tool
I had a great time this week speaking to the Atlanta PHP user group about our new Web Platform gallery