Forzar el modo de compatiblidad en IE

Martes 10 de Diciembre de 2013

Cuando Internet Explorer carga una página web, como se visualiza no depende de la versión de navegador, sino del modo de "compatibilidad" o de "documento" que tenga activado. Esta funcionalidad se representa con un icono de una página rota en la barra de navegador. Desconozco las causas por lo que esta funcionalidad se activa en los usuarios, pero es algo que es más común de lo que pensamos. Los modos posibles que tienen los navegadores son:

IE7: Solo permite el modo de documento IE7.
IE8: Permite los modos de documento IE7 e IE8.
IE9-IE10: Permite todos los modos de documentos posibles.

Esto puede hacer que una persona visualice una página web con IE8, pero lo vea como si fuese IE7 (problema más común que suele suceder y que he podido comprobar una y otra vez). Para solucionar este problema, podemos "forzar" el modo de documento que cada versión debe emular. Para ello, utilizo el siguiente código que fuerza el modo de compatibilidad a la versión correspondiente:

Fichero: template.php

/**
 * Implements template_preprocess_page().
 */
function anpp_preprocess_page(&$vars) {

  $agent = strtolower($_SERVER['HTTP_USER_AGENT']);

  if (stristr($agent, 'msie') !== FALSE) {

    // Localizamos la versión de navegador.
    $pattern = '/.*msie ([0-9]*)\..*/';
    $matches = array();

    preg_match($pattern, $agent, $matches);
    if ($matches[1]) {
      $class = 'ie' . $matches[1];
    }
  }

  if (isset($class)) {
    switch ($class) {
      case 'ie7':
        drupal_set_html_head('<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>');
      break;

      case 'ie8':
        drupal_set_html_head('<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"/>');
      break;

      case 'ie9':
        drupal_set_html_head('<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9"/>');
      break;
    }
  }
}

Este código es para drupal 6. En caso de Drupal 7 se debe sustituir la función drupal_set_html_head por la función drupal_add_html_head. El uso de la función en Drupal 7 es algo más complejo, pero puede verse un ejemplo para esta misma etiqueta en los comentarios de la función en api.drupal.org.

También es posible forzar a que use la última versión que puede emular mediante edge:

drupal_set_html_head('');

Theme

Compatibility