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.
30 January 2012 at 02:45
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');
}

27 November 2012 at 06:10
Jolene said…
So grateful for finding this! Thanks for posting; saved the day!
2 July 2013 at 07:08
Unknown said…
Thank you so much!! saves my day.
15 May 2014 at 00:54
At Least Five said…
I'm trying to solve this problem with IE11 and I have no success.
Anyone knows any specific IE11 issue?
10 December 2014 at 11:53
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
28 April 2015 at 05:13
Post a Comment

Popular posts from this blog

User Interface Usability Checklist Part 2

So you made it through part 1 of the usability check list, how about part 2? 21. Poor Label Alignment If you have been through design 101 you have probably heard of the wonderful acronym for the basic principles of design, C.R.A.P. This of course stands for Contrast, Repetition, Alignment and Proximity. Proximity is very important when identifying which label belongs to which input. Each different form of alignment has its advantages and disadvantages. Left Alignment The label appearing on the left of a box is a common practice. This often helps with vertical space and keeping all of the elements of a form on a single page, which can be beneficial in aiding the user in form completion and making them aware of all of the possible options they can, or made need to provide information for. It does however have a few disadvantages. Long labels cause short label's input boxes to be far away from the end of the label, this damages that basic principle of proximity. In extreme...
Read more

Procedural VS Object Oriented

What is the correct way to write code? If you have worked with PHP long enough you may well have come across the website  PHP The Right Way . This website is dedicated to helping developers learn the industry best practices. Interestingly another site appeared afterwards called  PHP The Wrong Way . In essence this website is a rebuttal to the many of the recommendations made in PHP The Right Way. With any sphere of learning it is important to keep an open mind, to listen and critically evaluate the received wisdom and determine if it is indeed wisdom or opinion built on shaky ground. There is one part of the argument I would like to focus on and this is the argument for and against " Always use object-oriented Programming ". While PHP The Right Way does not appear to explicitly state that you should always use an object oriented approach it is implicit from the examples and the recommendations to use design patterns. While there are programming approaches available othe...
Read more