Definir la compatibilidad de documentos en internet explorer. ¿Por que no se me ve igual mi pagina web en IE, Crome, Firefox ...?

Introducción

Para ayudar a asegurarse de que las páginas web tienen un aspecto coherente en versiones futuras de Internet Explorer, Internet Explorer 8 introduce la compatibilidad del documento. Se trata de una extensión del modo de compatibilidad introducido en Microsoft Internet Explorer 6 que permite elegir el modo de presentación concreto que Internet Explorer utiliza para mostrar sus páginas web.
En este artículo se describe la necesidad de que exista la compatibilidad del documento, se enumeran los modos de compatibilidad del documento disponibles para las versiones recientes de Internet Explorer, y se muestra cómo seleccionar modos de compatibilidad concretos.

Entender la necesidad de la compatibilidad del documento

Cada versión principal de Internet Explorer agrega características diseñadas para que el explorador resulte más fácil de utilizar, así como para aumentar la seguridad y la compatibilidad con los estándares del sector. A medida que se incorporan características a Internet Explorer, existe el riesgo de que los sitios web anteriores no se muestren correctamente.
Para minimizar este riesgo, Internet Explorer 6 permitía a los desarrolladores web elegir la manera en que Internet Explorer interpretaba y mostraba las páginas web. El "modo no estándar" era el valor predeterminado; mostraba las páginas como si se vieran con versiones anteriores del explorador. El "modo estándar" (también denominado "modo estricto") presentaba la máxima compatibilidad con los estándares del sector; sin embargo, para poder aprovechar esta compatibilidad mejorada, las páginas web debían incluir una directiva <!DOCTYPE> apropiada.
Si un sitio no incluía una directiva <!DOCTYPE>, Internet Explorer 6 lo mostraba en el modo no estándar. Si un sitio contenía una directiva <!DOCTYPE> válida que el explorador no reconocía, Internet Explorer 6 mostraba el sitio en modo estándar de Internet Explorer 6. Como había pocos sitios que incluyesen ya la directiva <!DOCTYPE>, el cambio de modo de compatibilidad resultó muy satisfactorio. Permitía a los desarrolladores web elegir el mejor momento para migrar sus sitios al modo estándar.
Con el tiempo, muchos sitios empezaron a basarse en el modo estándar. También empezaron a utilizar las características y el comportamiento de Internet Explorer 6 para detectar Internet Explorer. Por ejemplo, Internet Explorer 6 no admitía el selector universal; algunos sitios web lo utilizaron como forma de servir contenido concreto a Internet Explorer.
Internet Explorer 7 ofrecía nuevas características, tales como compatibilidad con el selector universal, diseñadas para aportar mayor compatibilidad con los estándares del sector. Dado que la directiva <!DOCTYPE> admite únicamente dos opciones (el modo no estándar y el modo estándar), el modo estándar de Internet Explorer 7 reemplazó al modo estándar de Internet Explorer 6.
En consecuencia, los sitios basados en el comportamiento del modo estándar de Internet Explorer 6 (por ejemplo, ausencia de compatibilidad con el selector universal) no detectaban la nueva versión del explorador. Por este motivo, el contenido específico de Internet Explorer no se servía a Internet Explorer 7 y estos sitios no se mostraban tal y como se esperaba. Como Internet Explorer 7 únicamente admitía dos modos de compatibilidad, los propietarios de los sitios afectados se vieron obligados a actualizarlos para que admitieran Internet Explorer 7.
Internet Explorer 8 presenta una compatibilidad con estándares más estrecha que ninguna de las versiones anteriores del explorador. Por consiguiente, puede que los sitios diseñados para versiones anteriores del explorador no se muestren como cabría esperar. Para ayudar a mitigar cualquier problema, Internet Explorer 8 introduce el concepto de compatibilidad del documento, que permite especificar las versiones de Internet Explorer que su sitio está diseñado para admitir. La compatibilidad del documento agrega nuevos modos a Internet Explorer 8; estos modos indican el explorador cómo interpretar y presentar un sitio web. Si el sitio no se muestra correctamente en Internet Explorer 8, puede actualizarlo para que admita los estándares web más recientes (es lo más indicado) o bien puede obligar a Internet Explorer 8 a que muestre el contenido como si se estuviera viendo en una versión anterior del explorador. Para ello, se utiliza el elemento meta a fin de agregar un encabezado X-UA-Compatible a las páginas web.
Esto permite elegir cuándo actualizar el sitio de modo que sea compatible con las nuevas características que Internet Explorer 8 admite.

Entender los modos de compatibilidad de documento

Internet Explorer 8 admite varios modos de compatibilidad del documento que habilitan distintas características y pueden afectar a la manera de mostrar el contenido.

• El modo Emular IE8 indica a Internet Explorer que utilice la directiva <!DOCTYPE> para determinar cómo presentar el contenido. Las directivas del modo estándar se muestran en el modo estándar de Internet Explorer 8, mientras que las directivas del modo no estándar se muestran en modo de IE5. A diferencia del modo IE8, Emular IE8 respeta la directiva <!DOCTYPE>.
• El modo Emular IE7 indica a Internet Explorer que utilice la directiva <!DOCTYPE> para determinar cómo presentar el contenido. Las directivas del modo estándar se muestran en el modo estándar de Internet Explorer 7, mientras que las directivas del modo no estándar se muestran en modo de IE5. A diferencia del modo IE7, Emular IE7 respeta la directiva <!DOCTYPE>. Para muchos sitios Web, este es el modo de compatibilidad preferido.
• El modo IE5 presenta el contenido como si se mostrara en el modo no estándar de Internet Explorer 7, que es muy similar a la manera de mostrarlo en Internet Explorer 5.
• El modo IE7 presenta el contenido como si se mostrara en el modo estándar de Internet Explorer 7, con independencia de si la página contiene o no una directiva <!DOCTYPE>.
• El modo IE8 proporciona la máxima compatibilidad disponible para los estándares del sector, incluida la especificación sobre hojas de estilos en cascada nivel 2.1 de W3C  (puede estar en inglés) y la API de selectores de W3C  (puede estar en inglés), así como compatibilidad limitada con la el borrador de trabajo de la especificación sobre hojas de estilos en cascada nivel 3 de W3C  (puede estar en inglés).
• El modo de borde indica a Internet Explorer que muestre el contenido en el modo más alto que esté disponible. Con Internet Explorer 8, esto equivale al modo IE8. Si una (hipotética) versión futura de Internet Explorer admitiera un modo de compatibilidad mayor, las páginas establecidas en el modo de borde aparecerían en el modo más alto admitido por esa versión. Sin embargo, esas mismas páginas aparecerían en modo IE8 al verlas con Internet Explorer 8.

Dado que los documentos en modo de borde muestran las páginas web en el modo más alto disponible para la versión de Internet Explorer con la que se ven, se recomienda limitar su uso a las páginas de prueba y otros usos que no sean de producción.

Especificar los modos de compatibilidad de documento

Para especificar un modo de documento para las páginas web, se utiliza el elemento meta a fin de incluir un encabezado X-UA-Compatible http-equiv en la página web. En el ejemplo siguiente se especifica la compatibilidad del modo Emular IE7.

<html>
<head>
  <!-- Mimic Internet Explorer 7 -->
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >
  <title>My Web Page</title>
</head>
<body>
  <p>Content goes here.</p>
</body>
</html> 

El atributo content especifica el modo de la página; para imitar el comportamiento de Internet Explorer 7, especifique IE=EmulateIE7. Especifique IE=5, IE=7 o IE=8 para seleccionar uno de esos modos de compatibilidad. También puede especificar IE=edge para indicar a Internet Explorer 8 que debe utilizar el modo más alto disponible.
El encabezado X-UA-Compatible no distingue mayúsculas de minúsculas; sin embargo, debe aparecer en el encabezado de la página web (la sección HEAD) antes que todos los demás elementos, con la excepción del elemento title y los otros elementos meta.

Configurar los servidores web para especificar los modos de compatibilidad predeterminados

Los administradores de sitios web pueden configurar sus sitios para que adopten como valor predeterminado un modo de compatibilidad del documento concreto; para ello, deberán definir un encabezado personalizado para el sitio. El proceso concreto depende de cada servidor web. Por ejemplo, el archivo web.config siguiente permite que Microsoft Internet Information Services (IIS) defina un encabezado personalizado que presenta automáticamente todas las páginas en modo IE7.

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <clear />
        <add name="X-UA-Compatible" value="IE=EmulateIE7" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>
</configuration> 

Si especifica un modo de compatibilidad del documento predeterminado mediante el servidor web, puede invalidar esa configuración especificando un modo de compatibilidad del documento diferente en una página web concreta. El modo especificado dentro de la página web tiene precedencia sobre el modo especificado por el servidor.
Consulte la documentación del servidor web de que se trate para obtener información sobre cómo especificar encabezados personalizados. O bien, para obtener más información, vea:

• Implementación del modificador META en Apache
• Implementación del modificador META en IIS

Determinar el modo de compatibilidad de documento

Para determinar el modo de compatibilidad del documento de una página web mediante Internet Explorer 8, utilice la propiedad documentMode del objeto document. Por ejemplo, si escribe lo siguiente en la barra de direcciones de Internet Explorer 8 se muestra el modo de documento de la página web actual.

javascript:alert(document.documentMode);

La propiedad documentMode devuelve un valor numérico que corresponde al modo de compatibilidad del documento de la página. Por ejemplo, si una página admite el modo IE8, documentMode devuelve el valor 8.
La propiedad compatMode introducida en Internet Explorer 6 se ha dejado de utilizar en favor de la propiedad documentMode introducida en Internet Explorer 8. Las aplicaciones que se basan actualmente en compatMode siguen funcionando en Internet Explorer 8; sin embargo, es conveniente actualizarlas para que utilicen documentMode.
Si desea utilizar JavaScript para determinar el modo de compatibilidad de un documento, incluya código que admita versiones anteriores de Internet Explorer, como se muestra en el ejemplo siguiente.

engine = null;
if (window.navigator.appName == "Microsoft Internet Explorer")
{
   // This is an IE browser. What mode is the engine in?
   if (document.documentMode) // IE8
      engine = document.documentMode;
   else // IE 5-7
   {
      engine = 5; // Assume quirks mode unless proven otherwise
      if (document.compatMode)
      {
         if (document.compatMode == "CSS1Compat")
            engine = 7; // standards mode
      }
   }
   // the engine variable now contains the document compatibility mode.
}

Entender los valores del atributo content

El atributo content es flexible porque acepta valores que no son los descritos anteriormente. Esto permite controlar mejor la manera en que Internet Explorer muestra las páginas web. Por ejemplo, puede establecer el atributo content en IE=7.5. Al hacer esto, Internet Explorer intenta convertir el valor en un vector de versión y selecciona el modo más próximo al resultado obtenido. En este caso, Internet Explorer se establecería en el modo IE7. En los ejemplos siguientes se muestran los modos seleccionados para otros valores cuando no existen otros factores de mitigación.

<meta http-equiv="X-UA-Compatible" content="IE=4">   <!-- IE5 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=7.5" > <!-- IE7 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=100" > <!-- IE8 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=a" >   <!-- IE5 mode --> 

<!-- This header mimics Internet Explorer 7 and uses 
     <!DOCTYPE> to determine how to display the Web page -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >    

Nota: en el ejemplo anterior se muestran los resultados de valores de content individuales. En la práctica, Internet Explorer únicamente respeta el primer encabezado X-UA-Compatible de una página web.

También puede utilizar el atributo content para especificar varios modos de compatibilidad del documento; esto ayuda a asegurarse de que las páginas web se muestren de forma coherente en versiones futuras del explorador. Para especificar varios modos de documento, establezca el atributo content de tal forma que identifique los modos que desea utilizar. Utilice un signo de punto y coma para separar los modos entre sí.
Si una versión determinada de Internet Explorer admite más de uno de los modos de compatibilidad solicitados, utilizará el modo más alto disponible en la lista del atributo content del encabezado. Puede utilizar este hecho para excluir modos de compatibilidad concretos, aunque no se recomienda. Por ejemplo, el encabezado siguiente excluye el modo IE7.

<meta http-equiv="X-UA-Compatible" content="IE=5; IE=8" >

Controlar la presentación predeterminada

Cuando Internet Explorer 8 encuentra una página web que no contiene un encabezado X-UA-Compatible header, utiliza la directiva <!DOCTYPE> para determinar cómo mostrar la página. Si la directiva no está presente o no especifica un tipo de documento basado en estándares, Internet Explorer 8 muestra la página en modo IE5 (modo no estándar).
Si la directiva <!DOCTYPE> especifica un tipo de documento basado en estándares, Internet Explorer 8 muestra la página en modo IE8, excepto en los casos siguientes:

• Vista de compatibilidad está habilitada para la página.
• La página está cargada en la zona de intranet e Internet Explorer 8 está configurado para mostrar las páginas de la zona de intranet en Vista de compatibilidad.
• Internet Explorer 8 está configurado para mostrar todos los sitios web en Vista de compatibilidad.
• Internet Explorer 8 está configurado para utilizar la lista Vista de compatibilidad, que especifica un conjunto de sitios web que siempre se muestran en Vista de compatibilidad.
• Las Herramientas de desarrollo se utilizan para invalidar la configuración especificada en la página web.
• La página web encontró un error de diseño de página e Internet Explorer 8 está configurado para recuperarse automáticamente en este tipo de errores volviendo a abrir la página en Vista de compatibilidad.

Para obtener más información, vea el tema recapitulativo sobre Vista de compatibilidad en el blog de Internet Explorer  (puede estar en inglés).

Nota: cuando se configura para cargar las páginas de intranet en Vista de compatibilidad, Internet Explorer hace una excepción con las páginas cargadas mediante la dirección del host local o una dirección de bucle invertido. Las páginas que se cargan mediante una de estas técnicas se muestran en modo IE8 cuando la directiva <!DOCTYPE> especifica un tipo de documento basado en estándares.

Además, la clave del Registro siguiente permite controlar la manera en que Internet Explorer administra las páginas que no contienen encabezados X-UA-Compatible.

HKEY_LOCAL_MACHINE (o HKEY_CURRENT_USER)
     SOFTWARE
          Microsoft
               Internet Explorer
                    Main
                         FeatureControl
                              FEATURE_BROWSER_EMULATION
                                   iexplore.exe = (DWORD)

El valor de DWORD debe ser igual a uno de los valores siguientes.

Valor	Descripción
7000	Las páginas que contienen directivas <!DOCTYPE> basadas en estándares se muestran en modo IE7.
8000	Las páginas que contienen directivas <!DOCTYPE> basadas en estándares se muestran en modo IE8.
8888	Las páginas siempre se muestran en modo IE8, con independencia de la directiva <!DOCTYPE>. (Con este valor se eluden las excepciones enumeradas anteriormente.)

De forma predeterminada, las aplicaciones en las que se hospedan el control WebBrowser abren las páginas basadas en estándares en el modo IE7, a no ser que la página contenga un encabezado X-UA-Compatible apropiado. Puede cambiar este comportamiento agregando el nombre del archivo ejecutable de la aplicación a la clave de control de características FEATURE_BROWSER_EMULATION y estableciendo el valor en consecuencia.

Conclusión

La compatibilidad es una consideración importante para los diseñadores web. Si bien es mejor crear sitios que no se basen en comportamientos o características concretos de un explorador web, hay ocasiones en que no es posible. El modo de compatibilidad del documento asocia una página web al comportamiento de una versión concreta de Internet Explorer.
El encabezado X-UA-Compatible se utiliza para especificar las versiones de Internet Explorer que sus páginas admiten. document.documentMode se utiliza para determinar el modo de compatibilidad de una página web.
Al optar por admitir una versión concreta de Internet Explorer, puede ayudar a asegurarse de que sus páginas se muestren de forma coherente en versiones futuras del explorador.

Temas relacionados

• documentMode
• compatMode
• doctype
• Mejoras de CSS en Internet Explorer 6 (puede estar en inglés)
• Comentarios condicionales (puede estar en inglés)

Fuente datos: http://msdn.microsoft.com/es-es/library/cc288325(v=VS.85).aspx