The Self-Taught Programmer

Recipes from real-world experience with asp.net.

How to Force an ASP.NET Page into IE Compatibility Mode (Even when Using Themes)

leave a comment »

The Situation:

You need to to use a control that is not fully compatible with the latest version of Internet Explorer (or you find that your page just doesn’t function the same in the latest version).

A Solution:

The normal solution (and the one that nearly everyone can use UNLESS they are working with ASP.NET and themes) is detailed here (http://msdn.microsoft.com/en-us/library/cc288325(v=vs.85).aspx). Basically, that solution says to put a meta tag in the head section of your page like the one shown below which forces IE into IE8 compatibility mode.

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

Now here’s the MOST IMPORTANT PART — this meta tag MUST be the first thing after the opening HEAD tag.

And this is what causes the big problem for anyone creating an ASP.NET web site that uses themes — ASP.NET injects stylesheets for the theme into the page as the first elements after the opening HEAD tag, so IE ignores our awesome meta tag. And to complicate things even further, ASP.NET performs this injection very late in the page life cycle, so it is hard to override it.

I solved this problem recently by using the code-behind to inject the meta tag. To make sure the meta tag would be the last thing injected (after the theme stylesheets), I injected it at the very start of the RENDER event of the page life cycle like this:

protected override void Render(HtmlTextWriter writer)
{
	// This code injects an IE compatibility meta tag into the page "head" section to resolve
	//   version incompatibility issues IE.
	//   This tag has to be injected at the very last moment before rendering the html
	//   because ASP.NET injects theme stylesheets that interfere with this tag.
	string meta = @" <meta http-equiv='X-UA-Compatible' content='IE=8'> ";

	// add the meta tag to head BEFORE the page starts rendering
	Literal ctrl = new Literal();
	ctrl.Text = meta;
	Page.Header.Controls.AddAt(0, ctrl);

	// Now continue with the page Render event
	base.Render(writer);
}

Note that the code above is an override method — you can cut and paste this code directly in your page‘s (or master page’s) code behind. ASP.NET knows how to process it and passes the ‘HtmlTextWriter’ parameter into the method without our intervention.

What about injecting the meta tag in the PRE-RENDER stage?

You may find the solution at https://connect.microsoft.com/VisualStudio/feedback/details/581278/setting-x-ua-compatible-meta-tag-in-asp-net-4-0-site-doesn-t-work-yes-it-s-at-the-top, which involves finding and moving the meta tag in the pre-render event, works for you. It did not work for me, and I suspect it has to do with the page life cycle when a master page is used. When I tried it, the suggested code seems to have performed its job BEFORE the theme stylesheets were injected, so the meta tag still ended up below the stylesheets and was therefore ignored.

Advertisements

Written by Jim McMullen

October 22, 2012 at 4:57 pm

Posted in How-To

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: