Why is IE9 and IE8 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.
To fix the ie8, ie7, ie6 and oldie class on the html tag you could use the next javascript to add some css classes to the tag. This script only works if you use jquery 1.*
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');
}
No comments:
Post a Comment