[2014-04-16]

Making Drupal compatible with Internet Explorer's Compatibility Mode

Internet Explorer is a deadly trap for web developers. In fact a good amount of time is allotted to just ensuring a website's experience is uniform across different versions of the browser. The problem plaguing Internet Explorer is that each version has generally been released alongside a new iteration of the Windows operating system. With this life cycle certain operating systems get left behind (the dreaded era of Windows XP with IE8 is finally, somewhat over.) However! Despite the hopefully death of Internet Explorer 8 developers must worry about compatibility mode. I've had calls from clients reporting distorted websites. After viewing their technical details I discovered "Windows 8 running Internet Explorer 7" (or something close to that.) I don't know if it is the internal IT guy playing security freak, or what, but compatibility mode was always flipped on. Luckily, there is a straightforward fix.


 'html_tag',
    '#tag' => 'meta',
    '#attributes' => array(
      'http-equiv' => 'X-UA-Compatible',
      'content' =>  'IE=edge,chrome=1',
    ),
    '#weight' => -99999,
  );
  // Add header meta tag for IE to head
  drupal_add_html_head($meta_ie_edge, 'meta_ie_edge');
}

This snippet provides two methods for getting Internet Explorer to break out of compatibility mode. The first is actually part of Drupal 8 (https://drupal.org/node/1203112) and the second adds the proper meta tag. It also ensures that the X-UA-Compatible meta tag is first. There are instances where Interner Explorer doesn't respect the tag when it is the second or later meta tag.

📘 Understanding Drupal: A Complete Guide to Caching Layers — my new book is out now!

Want more? Sign up for my weekly newsletter