I’ve had some trouble with Internet Explorer recently.
I was making a new web tool which looked fine in all browsers. Except Internet Explorer, where it looked a bit squiffy.
Internet Explorer has “Compatibility View”. Compatibility View makes IE behave like the older versions of Internet Explorer, the ones before Microsoft started paying more attention to web standards.
It makes sense – there are a lot of websites out there that were written to render well on old versions of Internet Explorer, and Microsoft needed to make the move to standards compliance in a way that doesn’t break all of them.
The problem is, Compatibility View can be a little… insistent.
It kept turning on, even though I didn’t want it, even though my site worked fine in new shiny standards mode, and looked horribly broken in Compatibility View.
You can manually disable it, but I don’t want to have to make users do that. As the web developer, I want to be able to disable it – to tell IE that I want the site to be rendered in standards mode.
It was a bit fiddly. Here’s how I did it.
Specify a DOCTYPE that will let IE know the site is all new and groovy
I used <!DOCTYPE html>
It has to the first thing in the page, before anything else, even spaces or line breaks. Because of some comments and blank lines in my JSP, I had some blank lines before the <!DOCTYPE html> line, and Internet Explorer doesn’t notice it then.
Start with <!DOCTYPE html> and it shows IE this isn’t a legacy site.
But IE sometimes kept switching back into Compatibility View.
There is a META tag you can put in the HEAD of your HTML to explicitly tell IE which mode to use.
I used <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
There is a small undocumented-feature / bug with this, too.
It only works if this is the first tag after <HEAD>. I originally had this after a bunch of other META tags, but Internet Explorer doesn’t notice it then. But if you make it the first tag in the document head, IE will spot it.
That works… most of the time.
Unless IE thinks that the site is on the Intranet. Then it overrides the META tag instruction, and uses Compatibility View anyway.
Why?!
But it’s okay – there is an HTTP header that you can use to override the override. You can include it in your server response to tell IE that you definitely, positively, want it to stop buggering about and just use the non-ancient rendering mode.
X-UA-Compatible : IE=edge
I added a filter to set this header in my responses when serving HTML.
Finally, it seems to work.
Any one of these steps seems to make IE stay in standards mode some of the time. As far as I can tell, you need to do all of them, exactly right, to get IE to behave all of the time.
That was a good use of a few hours(!)
Tags: html, internet explorer
Hi Dale,
Thanks for the write-up! We’re having the same issue and wanted to implement your suggestion, but since it’s an Intranet site we need to update the http header you suggested.
Any examples you can show how you did this?
Thanks again!
Peter
How are you implementing stuff server side? Servlets? PHP? Something else?
A really simple php implementation is to add the following in your scripts:
header(‘X-UA-Compatible : IE=edge’,true);
You may add it to your webserver in it’s config too. I just used this and my site stopped blocking on a testing pc in my office that had an automatic update an hour ago and just stopped working.
“Unless IE thinks that the site is on the Intranet. Then it overrides the META tag instruction, and uses Compatibility View anyway. Why?!â€
You can also disable Intranet Compatibility View in your browser: Tools > Compatibility View Settings > Uncheck “Display intranet sites in Compatibility Viewâ€.
It’s designed for intranet sites that were built for earlier versions of IE (because on an intranet, you can make everyone use the same browser) and that companies didn’t want to pay to fix for later versions. Yay business customers.
Also, better hope your domain doesn’t end up on Microsoft’s compatibility view list: http://hsivonen.iki.fi/doctype/#ie8