By: Sarah Horrigan
Recently I discovered that the main page of a website that I’m developing wasn’t rendering properly in Internet Explorer 9 (IE9). The page in question includes HTML5 specific elements, included the appropriate doctype and the response headers included the appropriate mime-type as well.
In browsers such as Google Chrome and Mozilla Firefox the page would render as expected. In IE9 the page would render, and the icon for compatibility mode would appear. The intention of this mode, as far as I can tell, is to alert the user that the page may be using content that works best in another rendering mode. Unfortunately for me in my experience this mode doesn’t understand HTML5 specific tags. If a user used this mode the page would fail to render properly.
To fix this it is necessary to define a document compatibility mode by including an Internet Explorer specific meta tag in the head of the page.
In my case the header went from this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My HTML page</title>
</head>
</html>
to this:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Explicitly Enable IE9 Standards mode -->
<meta http-equiv="X-UA-Compatible" content="IE=9" >
<title>My HTML page</title>
</head>
</html>
There are two things that irk me about this situation. First, while it is possible to determine that IE 9 has decided that compatibility mode should be presented as an option to the user, it isn’t possible to determine why. Which makes it near impossible to diagnose what is going on.
Second, is that my standards compliant page, which validated fine according to the W3C Validator, now must contain a vendor specific extension. I was naive enough to think that the days of vendor specific extension in the HTML were going to be a thing of the past.
The photo “Little Monkey” was uploaded to Flickr by Sarah Horrigan and used under the terms of a Creative Commons license.