IE9 Intranet compatibility mode in Intranet websites


So you have written an HTML5 site on your local intranet with some lovely CCS3 and run it up in Firefox and you feel smug, all your HTML and CSS are perfectly formed, but you run it up in IE9 and all the CSS3 goodness has gone away leaving your lack luster IE7 version of your site. 


Why is IE9 running in IE7 compatibility mode?
IE9 has a hidden setting that forces it to run in compatibility mode when it encounters any intranet websites. Microsoft have detailed this behaviour in a Blog about what they call Smart compatibility mode.

You can easily switch off the compatibility mode for specific machines using the internet tools mentioned in the article above, but most of the time developers do not have the luxury of applying corporate wide settings of this nature.

Avoiding Smart compatibility with X-UA-Compatible

Luckily there is a single line of HTML you can that you can use to override this behaviour:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

OK I did this but it is still not working!
If like me you implemented this code and IE9 tormented you by continuing to display in compatibility mode then perhaps my investigation can help you. I discovered 2 quirks in IE9 that can cause compatibility mode to remain in effect.
  1. The X-UA-Compatible meta element must be the first meta element in the head section.
  2. You cannot have condtional IE statements before the X-UA-Compatible meta element.
This means that if you use Paul Irish's wonderful HTML5 Boilerplate then on an Intranet with default IE9 settings your website will display in compatibility mode.  You need to change the start of the boilerplate from the following:-

<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

to:

<!doctype html>
<html class="no-js" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8">

Hope this has helped your IE9 intranet website up and running in shiny new HTML5 :)

Comments

halfordcottages said…
I've had exactly this problem. I built our company's intranet site with HTML5 boilerplate and all the staff on IE9 have some funny styling. However, i've needed the conditional comments for some CSS, so in the end I went for parsing the user agent string server side to output different html tags.
Unknown said…
KUDOS to you! We were looking at this for ages but couldn't do anything to fix it. I knew it was something dodgy. It still renders in IE9 Compat view for me but that doesn't create the problems we saw previously. Unlike you I fixed it with JS as we had some dependencies on those classes.

if($.browser.msie) {
var globalHtml = $('html');
if ($.browser.version < 9) globalHtml.addClass('lt-ie9');
if ($.browser.version < 8) globalHtml.addClass('lt-ie8');
if ($.browser.version < 7) globalHtml.addClass('lt-ie7');
}

Jolene said…
So grateful for finding this! Thanks for posting; saved the day!
Unknown said…
Thank you so much!! saves my day.
At Least Five said…
I'm trying to solve this problem with IE11 and I have no success.
Anyone knows any specific IE11 issue?
Unknown said…
Hi,

I am new in the topic of intranets. Recently, I have decided to implement some system like this in my company. I was recommended this company http://www.millennium.sk/en/services/portal-solutions
How can I find out if it allows IE9 Intranet compatibility? Thanks a lot for your answear.

With kindest regards,

Jan

Popular posts from this blog

User Interface Usability Checklist Part 2

Procedural VS Object Oriented