IE Compatibility View Settings and X-UA-Compatible meta tag

I used to hate IE with a passion.  Developing web apps for it was just a major pain in the ass. And then it didn’t bother me so much and the developer tools built into the browser finally made it a tolerable environment for building things.  It also helped that all the JS frameworks figured out how to isolate us from much of the quirks involved.

With the latest project for 1 of our clients, I’m back to “I can’t wait till MS replaces this godawful P-O-S!”  While it’s not entirely fair to current-day IE, it’s because they ever allowed those terrible IE 5 – 8 days to exist that I’m currently being punished.

Client built an app several years ago exclusively for the IE of the day.  That means every bad practice, non-standard thing you could do became part of the app.  It’s deployed internally on the corporate intranet.  So in today’s terms, that means it’s automatically (the default setting in the browser) set for compatibility view.  Oh. Yea.

IE Compatibility View Settings/Mode Sucks

So if you’re adding something current that uses something like jQuery, it’s going to fail unless you take extra steps.  There’s a solution out there, it’s the X-UA-Compatible meta tag.  But each version of IE has it’s own tag, or you can use the IE=edge setting.  And this would be great, but different versions of IE even handle the tag differently (or at least that is the case with IE 10 and IE 11).

And today, I ran into that.  App mod works great in IE 11 with the IE=Edge tag added, fails in IE 10.  Wonderful.  You’d hope that everyone in the company is on the standard, but of course, they’re not and some key people have IE 10.

I’ll work through it tomorrow, but here’s some fun I discovered while researching the issue of why the IE=Edge tag doesn’t seem to be working with IE 10:

  • Using a Meta tag also has several other issues such as ignoring the tag if it’s not directly under the head tag or if there is too much data before it (4k)
  • If that doesn’t work, you can try setting an HTTP header along with the page, like this with PHP header(‘X-UA-Compatible: IE=edge’);

Of course this is really fun to chase down when you’re currently running IE 11 and trying to emulate how an IE 10 browser would work if the IE 10 browser were told to act like it’s using Edge mode to view pages…sigh. Did I mention I hate IE?

I’ll post something tomorrow on whatever solution I come up with.