Internet Explorer Rendering Modes
Wednesday, February 19, 2014 at 11:40AM | Print Article Over the weekend I started to build a portfolio website, designed to showcase a work project.
The website itself was relatively simple, primarily static content providing an overview of the project and a video wall with some training material.
As the site has minimal content, I decided to follow the current industry trend to create an infinite scroll website. Infinite scroll is definitely not ideal for every scenario, but does offer an efficient way for the user to digest information if you have a linear story (they also look great).
The website was built using HTML5, CSS3 and JS, leveraging the Bootstrap and jQuery. It's obviously mobile responsive (thanks to bootstrap), but has no backend CMS.
As this is a work project it needed to be fully compatible with Internet Explorer (9+) as well Chrome, Firefox and Safari.
In development (localhost) everything looked great! The website rendered beautifully and after some minor workarounds for Internet Explorer, I was ready to migrate the code to our internal development server (Windows Server 2012, IIS 8.0).
This is where the trouble started...
Issue:
Chrome, Firefox and Safari all looked great, however Internet Explorer failed to render the site correctly. This caught me off guard, as everything I had written was client-side code and therefore I couldn't understand why migrating from my local machine to the remote web server would cause an issue.
It turns out Microsoft (in their wisdom) force Internet Explorer to treat local and remote web sites differently, rendering the page using a different compatibility mode. Unfortunately this decision breaks the majority of modern web sites when hosted on a remote web server (e.g. anything other than your local machine).
Solution:
Thankfully, once you understand the issue, the resolution is fairly simple. Essentially you need to overwrite the default Internet Explorer compatibility mode to ensure your website is rendered as you would expect when viewing from a remote web server.
There are two options to achieve this task:
Option One - Meta Tag:
Use a meta tag within your code to force a specific Internet Explorer compatibility mode. The following code snippet should sit directly beneath your "<head>" tag to ensure its effectiveness.
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
The "content"property has multiple options, I would personally recommend using "Edge" which forces each version of Internet Explorer to use its own "standards rendering mode".
However, you can also force Internet Explorer to use a specific rendering mode, for example, you may know your code only works using Internet Explorer 7 standards rendering mode:
- content="IE=9"
- content="IE=8"
- content="IE=7"
- content="IE=5"
Once complete Internet Explorer should render your website as designed.
Unfortunately the main challenge with this approach is that you must include the meta tag on every page, which is not always feasible. In this scenario the best option is to configure the setting on the web server itself.
Option Two - Meta Switch on IIS:
To configure IIS (7.0+) you need to include a custom "HTTP response header". This can be done by following the steps below:
- Click Start, click Administrative Tools, and then click Internet Information Services (IIS) Manager.
- In the connections pane, expand the node for the server.
- Click the Web site where you want to add the custom HTTP response header.
- In the Web site pane, double-click in the section.
- Under Actions, click Add.
- In the Name box, type "X-UA-Compatible".
- In the Value box, type "IE=Edge".
- Click OK.
Once complete, all pages served by this IIS website will be rendered by Internet Explorer using your defined setting.
I hope that helps!
