Making Drupal compatible with Internet Explorer's Compatibility Mode

Published on Wednesday 16, April 2014
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.
<?php
/**
* Implements hook_preprocess_html().
*/
function mytheme_preprocess_html(&$variables) {

  // IE EDGE SUPPORT
  if (drupal_get_http_header('X-UA-Compatible') === NULL) {
    drupal_add_http_header('X-UA-Compatible', 'IE=edge,chrome=1');
  }
 
  $meta_ie_edge= array(
    '#type' => '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.