Move X-UA-Compatible Tag to the Top

Now Internet Explorer 9 Beta is out, a lot of websites are broken again. For example, this site itself does not even work with IE9 if you try to post a new blog entry. Even IE 8 compatible sites are affected. IE9 interprets CSS styles differently from everyone else, including all existing IE versions. Some AJAX javascripts are broken, including Microsoft AJAX .NET.

A quick fix to a current website would be to simply add the following to the page header:

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

Please remember: this must be the first item in the header.

However, the "styleSheetTheme" setting of an ASP .NET webiste always places its CSS file in the header at the top before anything else. This makes the meta tag fail completely.

To move the "X-UA-Compatible" before it, you would have to do the following:

• Make the meta tag accessible from the server code by giving it an ID and add the "runat" attribute:
  
  <meta id="FirstCtrlID" content="IE=8" runat="server" equiv="X-UA-Compatible">
  ...
  
  
• Add the following pre-render event handler to your page (or master page):
  
  protected void Page_PreRender(object sender, EventArgs e)
  {
  Control MyFirstCtrl = Page.Header.FindControl("FirstCtrlID");
  Page.Header.Controls.Remove(MyFirstCtrl);
  Page.Header.Controls.AddAt(0, MyFirstCtrl);
  }
  
  

Actually, you can move things around in the header this way for anything that you explicitly define in there.