Need Quality Code? Get Silver Backed

IE Ate my CSS - Disabling Compatability Mode

21stJun

0

by Gary H

It is difficult to free fools from the chains they revere.

Voltaire

Internet Explorer is a horrible browser. It has come a long, long way since the dark days of IE6 but it continues to use "features" that make it an abhorrent target for web developers. We came across one such instance of buried treasure whilst working on an internal tool using BootStrap and jQuery.

The feature in question is Compatability Mode. This well intentioned yet utterly boneheaded feature makes the later versions of IE attempt to render a page as if it were an older version of IE. The problem we encountered was based on the rules that IE applies to determine if compatability mode should be used.

If you access any site that is in the zone classed as "Intranet", IE10 assumes that this is a corporate intranet running legacy code and therefore switches to compatability mode. This destroys all of our modern tooling, causes CSS to break all over the place and renders our jQuery unusable. What is counted as an Intranet site? It's when the server you are accessing is accessed by bypassing a proxy or is accessed using a UNC path.

The solution to this is to set a custom header to your site telling IE to always use standards mode. There are a few ways to do this. First, in your web.config:

<system.webServer>
	<httpProtocol>
		<customHeaders>
			<clear />
			<add name="X-UA-Compatible" value="IE=edge" />
		</customHeaders>
	</httpProtocol>
</system.webServer>

Alternatively you can try adding a meta-tag to your page. This is a bit more hit and miss - if it is not the first meta tag that IE loads or if any other scripts or CSS are parsed first, it will fail.

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

Finally, you can add the header yourself in code:

HttpContext.Current.Response.AppendHeader("X-UA-Compatible", "IE=edge");

An alternate option would be to turn off "Automatically Detect Intranet Sites" under the Tools -> Options menu, Connections tab in IE itself.

IE

Comments are Locked for this Post