Diferencias entre Internet Explorer E11 y Edge

Introducción

Internet Explorer 11 fue la última versión de Internet Explorer publicada por Microsoft en 2013. Con esta versión Microsoft culminó el esfuerzo de modernización y adaptación a las recomendaciones del W3C que había empezado en 2006 con Internet Explorer 7. Pero con esta versión, Microsoft decidió empezar de cero y abandonó el desarrollo de Internet Explorer. Su sucesor fue Microsoft Edge, que aunque continúa la numeración de Internet Explorer está basado en un motor nuevo.

Aunque actualmente (septiembre de 2017) el uso de Internet Explorer 11 siga siendo significativo, esto se debe a que en Windows 7 no se puede instalar Microsoft Edge.

A partir del curso 2017/2018 he dejado de hacer referencia en los apuntes a Internet Explorer 11, pero he mantenido esta lección en la que se recogen las diferencias entre Internet Explorer 11 y Firefox, Chrome o Edge.

En esta página se comentan algunas de las diferencias entre Edge e Internet Explorer 11. En los casos en los que el comportamiento del navegador se puede considerar correcto, se indica con el icono Correcto en Internet Explorer o Correcto en Edge. En los casos en los que el comportamiento del navegador se puede considerar erróneo, se indica con el icono Incorrecto en Internet Explorer o Incorrecto en Edge.

Esta página no pretende ser una relación exhaustiva de diferencias, sino simplemente recopilar las diferencias que he ido encontrando al redactar estos apuntes, agrupándolas por temas:

¡Atención! Esta página está pendiente de actualizar y que sólo haga referencia a IE11 y Edge.

Comparar diferencias entre versiones anteriores de IE

Windows 10 incluye tanto Microsoft Edge como Internet Explorer 11, pero no se pueden instalar versiones anteriores de Intenet Explorer, por lo que se debe recurrir a soluciones específicas:

Diferencias por incluir

Utilización del navegador

Hojas de estilo alternativas

Internet Explorer 11 permite elegir hojas de estilo alternativas mediante el menú Ver > Estilo, pero Edge no.

Zoom

Internet Explorer 11 dispone de dos tipos de zoom:

Firefox dispone de dos tipos de zoom:

En Firefox los dos tipos de zoom funcionan mediante el menú Ver > Tamaño, con las combinaciones de teclas Ctrl++ y Ctrl+- o con la combinación Ctrl+rueda del ratón. La opción del menú Ver > Tamaño >Sólo ampliar texto permite elegir el tipo de zoom a aplicar.

Teclas de acceso en formularios

Para acceder a elementos de un formulario utilizando teclas de acceso definidas mediante el atributo accesskey, hay que utilizar la combinación de teclas siguiente:

Internet Explorer y Chrome utilizan la combinación Alt+tecla, que tiene el inconveniente que entra en conflicto con combinaciones de teclas ya definidas por el navegador o el sistema operativo. Firefox utiliza la combinación Alt+Shift+tecla, más incómoda de utilizar, pero que no interfiere con las combinaciones ya definidas por el navegador o el sistema operativo.

En el ejemplo siguiente, Firefox utiliza la combinación Alt+Shift+tecla y Google Chrome e Internet Explorer utilizan la combinación Alt+tecla para acceder a las cajas de texto:

<input type="text" name="texto1" value="Acceso con a" accesskey="a" />
<input type="text" name="texto2" value="Acceso con i" accesskey="i" />
<input type="text" name="texto3" value="Acceso con o" accesskey="o" />
<input type="text" name="texto4" value="Acceso con u" accesskey="u" />

En el ejemplo siguiente, Internet Explorer no puede acceder a la caja de texto con la tecla de acceso d, ya que con la combinación Alt+d el foco se traslada a la barra de dirección. Google Chrome tampoco puede acceder con la combinación Alt+d, pero puede hacerlo con la combinación Alt+Shift+d:

Correcto en Chrome Correcto en Firefox Incorrecto en Internet Explorer
<input type="text" name="texto1" value="Acceso con d" accesskey="d" />

En el ejemplo siguiente Google Chrome no puede acceder a la caja de texto con la tecla de acceso e, ya que la combinación Alt+e abre el menú de herramientas, pero puede hacerlo con la combinación Alt+Shift+e:

<input type="text" name="texto2" value="Acceso con e" accesskey="e" />

En el caso de las teclas de acceso que no son las letras del alfabeto (los acentos no pueden ser teclas de acceso):

<input type="text" name="texto1" value="Acceso con 1" accesskey="1" />
<input type="text" name="texto2" value="Acceso con 2" accesskey="2" />
<input type="text" name="texto3" value="Acceso con 3" accesskey="3" />
<input type="text" name="texto4" value="Acceso con 4" accesskey="4" />
<input type="text" name="texto1" value="Acceso con ," accesskey="," />
<input type="text" name="texto2" value="Acceso con -" accesskey="." />
<input type="text" name="texto3" value="Acceso con +" accesskey="+" />

Si hay varios elementos con la misma tecla de acceso, o si hay varios elementos con la misma tecla de acceso en mayúsculas y minúsculas:

Incorrecto en Chrome Correcto en Firefox Correcto en Internet Explorer
<input type="text" name="texto1" value="Acceso con z" accesskey="z" />
<input type="text" name="texto2" value="Acceso con z" accesskey="z" />
<input type="text" name="texto3" value="Acceso con z" accesskey="z" />
Incorrecto en Chrome Correcto en Firefox Correcto en Internet Explorer
<input type="text" name="texto1" value="Acceso con w" accesskey="w" />
<input type="text" name="texto2" value="Acceso con W" accesskey="W" />
<input type="text" name="texto3" value="Acceso con W" accesskey="W" />

HTML

Elemento <main>

Internet Explorer 11 no reconoce la etiqueta <main>.

Correcto en Chrome Correcto en Firefox Incorrecto en Internet Explorer
<main>
  <p>Esto es un párrafo</p>
</main>
main {
  background-color: red;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Esta limitación se puede corregir añadiendo la propiedad display con el valor block.

Correcto en Chrome Correcto en Firefox Correcto en Internet Explorer
<main>
  <p>Esto es un párrafo</p>
</main>
main {
  display: block;
  background-color: red;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Propiedad text-decoration: overline

Si un párrafo tiene suprarayado y el tamaño de las palabras no es siempre el mismo:

Probablemente, la recomendación no especifica qué hacer en este caso particular y cada navegador ha adoptado una solución diferente (por confirmar)

Por determinar en Chrome Por determinar en Firefox Por determinar en Internet Explorer
<p style="text-decoration: overline">Este es
  <span style="font-size: 200%">un párrafo</span>
  <span style="font-size: 200%">suprarayado</span>.</p>

Este es un párrafo suprayado.

Listas

Lista dentro de lista

La lista siguiente se ve de forma distinta en Firefox y en Internet Explorer 11:

    • Elemento de lista

Se trata de una lista no ordenada dentro de otra lista no ordenada. La lista superior no contiene ningún texto, salvo la lista inferior. Firefox muestra dos marcadores a la misma altura. Internet Explorer 11 los muestra a diferentes alturas.

Tablas

El atributo rules

Nota: No comprobado en Internet Explorer 11.

En Firefox, cuando el modo de bordes no está establecido las tablas se ven en modo de bordes separado, pero si está el atributo rules las tablas se ven en modo colapsado. Pero en Internet Explorer, aunque esté el atributo rules las tablas se ven en modo separado.

Nota: En este caso no sé cuál de los dos no hace las cosas correctamente, porque aunque Firefox suele seguir mejor las normas, Firefox tiene bugs relacionados con los modos de bordes de las tablas.

Posicionamiento

Posicionamiento fijo

Nota: No comprobado en Internet Explorer 11.

Internet Explorer no aplica correctamente el posicionamiento fijo (position: fixed) a una tabla. Coloca la leyenda (caption) en el lugar correcto, pero no las celdas de la tabla. Firefox lo hace bien. Si la tabla está metida en una división y el posicionamiento lo tiene la división, Internet Explorer ya lo hace bien.

Formularios

Botón button sin atributo type

Nota: No comprobado en Internet Explorer 11.

Si un botón no lleva el atributo type, Firefox se comporta como si fuera un botón de tipo reset, pero Internet Explorer se comporta como si fuera un botón de tipo button.

Correcto en Firefox Correcto en Internet Explorer
<button>Botón</button>

Número: <input type="number" />

Internet Explorer sólo muestra mensajes de error en algunos casos muy concretos, si se mezclan letras y números envía el dato y si se escriben sólo letras no muestra mensajes de error aunque no envía nada en el control.

En el caso de los números decimales:

  • Chrome admite la coma (,) y el punto (.) como separadores de la parte decimal.
  • Firefox sólo admite la coma (,) como separador de la parte decimal.
  • Internet Explorer 11 no reconoce el atributo step y no muestra mensajes de error; además envía cualquier cosa que no tenga letras, aunque no sea un número válido.

Favicons

Favicons en archivos locales

Internet Explorer no muestra los favicons si las páginas no están colgadas en un servidor (es decir, si se abren como un archivo file://).

Favicons animados

Firefox admite favicons animados, pero Internet Explorer y Google Chrome no.

Incorrecto en Chrome Correcto en Firefox Incorrecto en Internet Explorer

Página de ejemplo que usa el gif animado siguiente: GIF animado

CSS

Pseudo-clases y pseudo-elementos

Los navegadores "recuerdan" los enlaces visitados, pero no de la misma manera. Internet Explorer 11 los recuerda mientras no se recargue la página, mientras que Firefox los recuerda hasta que se borra el historial en el navegador.

Los pseudo-elementos :before y :after

En Firefox y Google Chrome, el contenido generado no puede seleccionarse con el ratón, pero en Internet Explorer 11 sí.

p.cuidado:before {
  content: "Aviso: ";
  font-weight: bold;
  text-decoration: underline;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p.autor-barto:after {
  content: " (escrito por Barto).";
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Fuente

Propiedad font-size-adjust

La propiedad font-size-adjust funciona parcialmente en Firefox, pero no en Google Chrome ni Internet Explorer.

Correcto en Chrome Correcto en Firefox Correcto en Internet Explorer
p {
  font-size: 20px;
}

Esta letra x tiene 20 px de altura.

Incorrecto en Chrome Correcto en Firefox Incorrecto en Internet Explorer
p {
  font-size: 20px;
  font-size-adjust: 1.5;
}

Esta letra x debería tener 20 x 1.5 = 30 px de altura.

Incorrecto en Chrome Incorrecto en Firefox Incorrecto en Internet Explorer
p {
  font-size: 20px;
  font-size-adjust: 0.5;
}

Esta letra x debería tener 20 x 0.5 = 10 px de altura.

Líneas horizontales

En Firefox la propiedad color establece el color del borde de la línea, pero en Internet Explorer y Chrome no lo hace.

Incorrecto en Chrome Correcto en Firefox Incorrecto en Internet Explorer
hr {
  color: red;
}

Incorrecto en Chrome Correcto en Firefox Incorrecto en Internet Explorer
hr {
  height: 1px;
  color: red;
}

Incorrecto en Chrome Correcto en Firefox Incorrecto en Internet Explorer
hr {
  height: 10px;
  color: red;
}


Internet Explorer no interpreta correctamente las propiedades margin-left y margin-right cuando se utilizan junto con width.

En el ejemplo siguiente, la línea se sitúa a la izquierda del todo en Firefox y Chrome, pero en el centro en Internet Explorer:

Correcto en Chrome Correcto en Firefox Incorrecto en Internet Explorer
hr {
  background-color: red;
  height: 10px;
  margin-left: 0%;
  width: 50%;
}

En el ejemplo siguiente, la línea se sitúa a la derecha del todo en Firefox y Chrome, pero en el centro en Internet Explorer:

Correcto en Chrome Correcto en Firefox Incorrecto en Internet Explorer
hr {
  background-color: red;
  height: 10px;
  margin-right: 0%;
  width: 50%;
}

En el ejemplo siguiente, la línea se sitúa a partir del centro en Firefox y Chrome, pero en el centro de la mitad derecha en Internet Explorer:

Correcto en Chrome Correcto en Firefox Incorrecto en Internet Explorer
hr {
  background-color: red;
  height: 10px;
  margin-left: 50%;
  width: 25%;
}

Listas

Tipo predefinidos de marcador: list-style-type

Firefox y Google Chrome aplican algunos valores de la propiedad list-style-type que Internet Explorer 11 no aplica.

Firefox es capaz de representar todos los estilos, pero en algunos casos es necesario tener instaladas las fuentes correspondientes. Si no están instaladas las fuentes, Firefox muestra un cuadro con el código Unicode del carácter no mostrado (en Firefox 2 y anteriores se mostraba un signo de interrogación (?)). Internet Explorer muestra el punto de las listas no ordenadas cuando no es capaz de representar el estilo.

Correcto en Chrome Correcto en Firefox Incorrecto en Internet Explorer
ul {
  list-style-type: hebrew;
}
  • Esto es un punto de una lista
  • Esto es otro punto de la misma lista
Correcto en Chrome Correcto en Firefox Incorrecto en Internet Explorer
ul {
  list-style-type: cjk-ideographic;
}
  • Esto es un punto de una lista
  • Esto es otro punto de la misma lista
Correcto en Chrome Correcto en Firefox Incorrecto en Internet Explorer
ul {
  list-style-type: hiragana;
}
  • Esto es un punto de una lista
  • Esto es otro punto de la misma lista
Correcto en Chrome Correcto en Firefox Incorrecto en Internet Explorer
ul {
  list-style-type: katakana;
}
  • Esto es un punto de una lista
  • Esto es otro punto de la misma lista
Correcto en Chrome Correcto en Firefox Incorrecto en Internet Explorer
ul {
  list-style-type: hiragana-iroha;
}
  • Esto es un punto de una lista
  • Esto es otro punto de la misma lista
Correcto en Chrome Correcto en Firefox Incorrecto en Internet Explorer
ul {
  list-style-type: katakana-iroha;
}
  • Esto es un punto de una lista
  • Esto es otro punto de la misma lista

Tablas

La propiedad caption-side

Firefox aplica los valores left y right de la propiedad caption-side que Google Chrome e Internet Explorer 11 no aplican.

Incorrecto en Chrome Correcto en Firefox Incorrecto en Internet Explorer
caption {
  caption-side: left;
}
Esto es la leyenda
Celda 1 Celda 2
Celda 3 Celda 4
Incorrecto en Chrome Correcto en Firefox Incorrecto en Internet Explorer
caption {
  caption-side: right;
}
Esto es la leyenda
Celda 1 Celda 2
Celda 3 Celda 4

Interface de usuario

La propiedad cursor

Internet Explorer 11 solamente admite en la propiedad cursor cursores en formato ICO o CUR, (ICO es el formato de los iconos de Windows y CUR es el formato de los cursores no animados de Windows, prácticamente idéntico al formato ICO), mientras que Firefox y Google Chorme admiten otros formatos de imagen.

Correcto en Chrome Correcto en Firefox Incorrecto en Internet Explorer
p {
  cursor: url("../img/exclamacion.png"), wait;
}

Al situar el cursor del ratón sobre este párrafo, la forma del cursor debe cambiar a un signo de exclamación en color rojo (o a un reloj de arena si no se puede mostrar la exclamación).

La propiedad outline

Contorno de un elemento en-línea

El contorno de un elemento en-línea no se muestra de la misma manera en Internet Explorer y Google Chrome que en Firefox.

span.con-outline {
  outline: black 3px solid;
}

Esto es un párrafo normal y corriente. Esta frase tiene un contorno de estilo solid y para ver la diferencia entre borde y contorno, debería ocupar varias líneas. Esta frase ya no tiene ni borde ni contorno.

Color invert en la propiedad outline

Firefox y Google Chrome no muestran el valor invert, mientras que Internet Explorer sí lo hace. En la página de bugs de Firefox se explica qué motivos dan los desarrolladores de Firefox para no hacerlo.

Incorrecto en Chrome Incorrecto en Firefox Correcto en Internet Explorer
body {
  background-color: black;
  color: white;
}

p {
  outline: invert 3px solid;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Otros

SVG

Internet Explorer muestra los elementos svg situados fuera de la zona definida por viewBox, mientras que Firefox y Google Chrome sólo muestran los elementos o la parte de los elementos situados dentro de la zona definida por viewBox.

MathML

Firefox es capaz de mostrar elementos MathML sin necesidad de plug-ins, aunque es necesario instalar fuentes adecuadas. Internet Explorer 11 requiere un plug-in para mostrar elementos MathML.

Firefox es capaz de mostrar archivos locales con elementos MathML. Internet Explorer no. El motivo es es que Internet Explorer carga cualquier documento con el tipo MIME text/html, mientras que Firefox carga los documentos que tienen la extensión .xhtml con el tipo MIME application/xhtml+xml.

Formato de imágenes de mapa de bits APNG

Firefox y Google Chrome muestran las imágenes en formato APNG, pero Internet Explorer 11 no lo hace.

Correcto en Chrome Correcto en Firefox Incorrecto en Internet Explorer
<img src="apng-balon.png" alt="Ejempo de imagen en formato APNG" />
Ejempo de imagen en formato APNG
Correcto en Chrome Correcto en Firefox Incorrecto en Internet Explorer
<img src="apng-balon.png" alt="Ejempo de imagen en formato APNG" style="background-color: lightblue" />
Ejempo de imagen en formato APNG