More on IE 7 Compatibility Mode

I’ve mentioned a couple of workarounds for a specific issue with the ASP.NET Menu control in Internet Explorer 8 in past posts.

This one’s a little more general, in terms of how you can set the IE 7 compatible mode for specific pages on your site, or for your entire site. Note that using compatibility mode is not optimal. Ideally, you should update your site to render standards-compliant markup for IE8. But for sites that are complete and not going to be updated, or while you’re figuring out what changes may need to be made, compatibility mode provides a nice bridge making the transition transparent to your users.

One way (as mentioned in my previous posts) to turn on compatibility mode is by simply adding the X-UA-Compatible META tag to the head section of the page you want to run in compat mode, or to a master page if you want to target multiple pages.

The downside to this approach is that if you use ASP.NET Themes configured from web.config, the CSS <link> tags end up getting injected above the META tag, and the META tag needs to appear before any other kinds of tags in order to work. D’oh!

The solution is pretty straightforward, and involves adding an HTTP header instead of using the META tag. You can do this in global.asax:

 Protected Sub Application_BeginRequest(ByVal sender As Object, 
    ByVal e As System.EventArgs)
    Response.AppendHeader("X-UA-Compatible", "IE=EmulateIE7")
End Sub

Or inline in a given page:

 <% Response.AppendHeader("X-UA-Compatible", "IE=EmulateIE7") %>

Or in code-behind:

 Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
    Response.AppendHeader("X-UA-Compatible", "IE=EmulateIE7")


End Sub 

If you’d prefer not to add headers, you can also use the META tag solution I mentioned earlier, and re-order the tags when the request executes, such that the META tag is bubbled to the top (some C# for those who like it better than VB):

 void Application_PreRequestHandlerExecute() {
    var page = Context.Handler as Page;
    if (page != null) page.PreRenderComplete += delegate {
        var head = page.Header;
        if (head != null) {
            var q = from Control c in head.Controls where c is HtmlMeta select c;
            foreach (var c in q.ToArray().Reverse()) {
                head.Controls.Remove(c);
                head.Controls.AddAt(0, c);
            }
        }
    };
}

Whichever route you choose, be aware that the X-UA-Compatible META tag (or header) isn’t just for backwards compatibility with IE 7. You can also use it to tell future versions of IE that you want your site to always render in IE 8 mode, as well as several other settings. We’re planning some sessions over the next couple of months for our roadshows on IE 8, and this is one of the topics we’ll be covering.