How to Make Your Twitter Bootstrap Site Play Nice With Internet Explorer's Compatibility View

I encountered a situation recently where I was responsible for developing a web application - using Twitter Bootstrap - that was going to be hosted next to another application that required Internet Explorer to run in Compatibility View. Worse yet, both applications run under the same top-level domain making it impossible to configure Internet Explorer separately for both.

The problem was that enabling Compatibility View on my site broke the UI, but turning Compatibility View off for the other site made it unusable. This is a heck of a quandary.

Instead of trying to find a way to work configuration magic with IE and Active Directory, I figured it would be best to make my site compatible with Internet Explorer regardless of the Compatibility View settings.

The solution is quite simple. Add the following <meta> tag directly below the <head> tag in your web application.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
Creative Commons License

What do you think?