Filed under Development
Many times I see people complaining about Internet Explorer 9 not rendering properly a “standard” web page, after digging into what the problem can be it normally resumes into two options:
- The web page is not using the document mode “IE9 standards”.
- The web page is using conditional comments making use of browser detection instead of feature detection and treats IE9 as IE7 or IE6, very old versions of IE that do not support today standards.
Let’s start with what the IE9 standards mode is.
Internet Explorer is the only browser that offers backward compatibility with older versions of the browser. This is done incorporating the new, plus the older versions of the rendering engine with each release of Internet Explorer.
As a user of IE you only need to press F12 to open the Developer Tools and select what document mode use.
This is very powerful because as developers we can decide what version of the IE rendering engine will be used to render the markup of our pages. In the case of Internet Explorer 9, as you have seen in the figure above, we can chose between the next document modes:
- IE 9 standards: This is the default and latest standards-compliant behavior used to render webs that have a strict or unknown document type.
- IE 8 standards: This behavior acts as it does IE8.
- IE 7 standards: This behavior acts as it does IE7.
- Quirks: This is the oldest behavior that can be used with IE, and applies when rendering a document with no doctype or a quirks doctype. It is similar to the behavior of IE5.
Selecting a different mode will reload the page to render it in the document mode selected, but will not change the user-agent string sent to the website. To do that you can also change the Browser Mode using the developer tools.
Regardless the best practice and my suggestion is to target always the standards and keep our sites upgraded to support them, in the case you have an old site you can’t migrate yet, you don’t need to continue using old versions of IE. You can upgrade to IE9 and use as quick fix the X-UA-Compatible meta tag to set what render engine IE has to use to display properly the page.
It is obvious but worthy to mention that if you use an older document mode as “Quirks mode”, you will use it with its full consequences. This means means that your modern IE9 browser will behave as the old IE5 browser and will not be able to use all the new standards and performance improvements that IE9 includes. You can easily see this by running this code and visualizing it in “Internet Explorer 9 standards” and any other document mode:
1: <html>
2: <head>
3: <title>HTML5 Canvas example</title>
4: <script>
5: function drawCanvas(){ 6:
7: var canvas = document.getElementById('myCanvas'); 8:
9: var context = canvas.getContext('2d'); 10:
11: context.fillRect (128, 25, 100, 100);
12: }
13: </script>
14: <style type="text/css">
15: canvas { border: 2px solid black; } 16: </style>
17: </head>
18: <body onload="drawCanvas();">
19:
20: <canvas id="myCanvas" width="260" height="200">
21: The document mode does not support canvas
22: </canvas>
23:
24: </body>
25: </html>
So, if you find your website not rendering properly in IE9, first of all check that the site is being rendered in IE9 standards mode and secondly that you are not using any conditional comments that serve custom code for older versions of IE.
In this article we will not cover best practices on how to use feature detection instead of browser detection bad practices to avoid conditional comments, but I recommend reading the article Same Markup: Writing Cross-Browser Code.
You can read additional information on how internet explorer determines the document mode.
If you like the article, please share it