![](\"http:\/\/dalelane.co.uk\/blog\/post-images\/120815-compat.png\")
<\/p>\nI’ve had some trouble with Internet Explorer recently. <\/p>\n
I was making a new web tool which looked fine in all browsers. Except Internet Explorer, where it looked a bit squiffy. <\/p>\n
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. <\/p>\n
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. <\/p>\n
The problem is, Compatibility View can be a little… insistent. <\/p>\n
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. <\/p>\n
<\/p>\n
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. <\/p>\n
It was a bit fiddly. Here’s how I did it. <\/p>\n
Specify a DOCTYPE<\/strong> that will let IE know the site is all new and groovy It has to the first thing in the page, before anything else, even spaces or line breaks<\/strong>. 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. <\/p>\n Start with <!DOCTYPE html> and it shows IE this isn’t a legacy site. <\/p>\n But IE sometimes kept switching back into Compatibility View. <\/p>\n There is a META tag you can put in the HEAD<\/strong> of your HTML to explicitly tell IE which mode to use. There is a small undocumented-feature \/ bug with this, too. <\/p>\n It only works if this is the first tag after That works… most of the time. <\/p>\n Unless IE thinks that the site is on the Intranet. Then it overrides the META tag instruction, and uses Compatibility View anyway. <\/p>\n Why?!<\/p>\n But it’s okay – there is an HTTP header<\/strong> 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. <\/p>\n I added a filter to set this header in my responses when serving HTML. <\/p>\n Finally, it seems to work. <\/p>\n 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. <\/p>\n That was a good use of a few hours(!)<\/p>\n","protected":false},"excerpt":{"rendered":" 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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[461,333],"class_list":["post-2222","post","type-post","status-publish","format-standard","hentry","category-code","tag-html","tag-internet-explorer"],"_links":{"self":[{"href":"https:\/\/dalelane.co.uk\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2222","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dalelane.co.uk\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dalelane.co.uk\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dalelane.co.uk\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dalelane.co.uk\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2222"}],"version-history":[{"count":0,"href":"https:\/\/dalelane.co.uk\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2222\/revisions"}],"wp:attachment":[{"href":"https:\/\/dalelane.co.uk\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2222"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dalelane.co.uk\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2222"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dalelane.co.uk\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2222"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\nI used <!DOCTYPE html><\/code><\/p>\n
\nI used <meta http-equiv=\"X-UA-Compatible\" content=\"IE=9; IE=8; IE=7; IE=EDGE\" \/><\/code><\/p>\n<HEAD><\/code>. 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<\/strong>, IE will spot it. <\/p>\nX-UA-Compatible : IE=edge<\/code><\/p>\n