Generating “compatibility mode” safe HTML using Razor

by Aaron D-H 14. February 2012 22:18

Internet Explorer has this "wonderful" feature call compatibility mode. I think the majority of web designers that have run into this gem would likely feel that Microsoft misnamed this feature.

After a great deal of frustration and delays caused by having the compatibility mode suddenly turn on and breaking our site we finally found a solution that works.

The site we have created was written in ASP.NET MVC 3 Razor, and we are running the latest version (2.5.2) of Modernizer. Our original _layout.cshtml file which had intermittent problems with Internet Explorer 8 switching to compatibility mode looked like the following:

<!DOCTYPE html class="no-js">

<!--[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 http-equiv="X-UA-Compatible" content="IE=Edge;" />

</head>

 

Note that the <!--[if lt IE 7]> style xml comments are the "best practice" for supporting multiple IE browsers, letting the browser choose the best tag to use when the page is displayed.

Below is a snippet of the _layout.cshtml file which solves this problem and supports all of the older IE browsers:

<!DOCTYPE html>

@if (Request.Browser.Browser == "IE" && Request.Browser.MajorVersion < 9)

{

if (Request.Browser.MajorVersion < 7)

{

@:<html class="no-js ie6 oldie" lang="en">

}

else if (Request.Browser.MajorVersion == 7)

{

@:<html class="no-js ie7 oldie" lang="en">

}

else if (Request.Browser.MajorVersion == 8)

{

@:<html class="no-js ie8 oldie" lang="en">

}

}

else

{

@:<html class="no-js" lang="en">

}

<head>

<meta http-equiv="X-UA-Compatible" content="IE=Edge;" />

</head>

 

 

Note that based on our testing, and contrary to other posts we have found, for "compatibility mode" to not turn on we must have a combination of the meta data tag X-UA-Compatible and the use of server side selection of the browser type. Any other combinations resulted in older browsers kicking into compatibility mode from time to time.

If you are not using Modernizer the _layout.cshtml file the markup becomes much simpler and more in line with other posted solutions:

<!DOCTYPE html>

<html lang="en">

<head>

<meta http-equiv="X-UA-Compatible" content="IE=Edge;" />

</head>

Tags:

Comments

Comments are closed

About the Author

I'd like to introduce myself to you... My name is Aaron Daisley-Harrison.  I have worked in the software engineering field for a number of years, and as an  Application Architect have created solutions for many industry verticals; worked with both Java and Microsoft technologies; Developed SQL database engines as well as full text search systems; and Knowledge management systems.   I am currently doing contract work out of the Pacific North West and have lately been focusing on Microsoft technologies like SharePoint 2007/2010, WCF, Identity Framework, JQuery, Xml and Silverlight.
[more]



 Digg!

 

Disclaimer
The opinions expressed herein are my own personal opinions and do not represent my employer's view in anyway.

© Copyright 2009 Aaron G. Daisley-Harrison - All Rights Reserved.