Volver al índiceDiferencias entre Internet Explorer 9 e Internet Explorer 8

Internet Explorer 9 ha aportado bastantes novedades con respecto a Internet Explorer 8, relacionadas principalmente con el soporte de las recomendaciones del W3C (HTML5, CSS3, SVG) y el aumento del rendimiento de JavaScript. Microsoft mantiene una web con información sobre las novedades de Internet Explorer 9.

En esta página se comentan algunas de esas diferencias.

Nota: Esta página no pretende ser una relación exhaustiva de diferencias entre IE9 e IE8, sino simplemente recopilar las diferencias que he ido encontrando al redactar estos apuntes.

Instalar varias versiones de IE en el mismo ordenador

Aunque las las versiones antiguas de IE (IE7 e IE6) cada vez son menos utilizadas, todavía hay un porcentaje significativo de usuarios de versiones antiguas, por lo que a la hora de diseñar un sitio web es importante tener en cuenta a esos usuarios.

El problema es que al instalar una nueva versión de Internet Explorer, la versión anterior se desinstala, lo que complica la prueba de un sitio web en versiones antiguas de IE.

La solución que propone Microsoft es utilizar máquinas virtuales. La plataforma de virtualización de Microsoft se llama VirtualPC y actualmente (octubre de 2011) la última versión publicada es Virtual PC 2007 SP1 de mayo de 2008. Microsoft también proporciona imágenes con Windows XP SP3 con IE6, Windows Vista con IE7 o Windows 7 con IE8 o IE9. Actualmente (octubre de 2011) las últimas versiones publicadas son de agosto de 2011 (y caducan en noviembre de 2011).

Microsoft también distribuye Microsoft Expression Web SuperPreview, que parece pensado para comparar en detalle páginas individuales.

Otra solución es utilizar algún programa que consiga instalar varias versiones de IE. Existen varios programas de este tipo, con resultados más o menos satisfactorios. Uno de ellos es Internet Explorer Collection. Actualmente (octubre de 2011), la última versión publicada es la versión 1.7.1.1 de agosto de 2011, que permite instalar 13 versiones de Internet Explorer, de la 1 a la 8.

Volver al principio de la página

Utilización del navegador

Extremo derecho de la ventana

Con la ventana del navegador maximizada, al arrastrar el ratón al extremo derecho de la pantalla y hacer clic, Internet Explorer 9 reconoce que se está queriendo hacer clic en la barra de desplazamiento. En Internet Explorer 8 al realizar la misma operación se estaba haciendo clic en el borde derecho de la ventana, lo que no producía ningún resultado. Este nuevo comportamiento permite desplazarse la página arriba y abajo sin tener que fijarse en hacer clic en la barra de desplazamiento.

Nota: Firefox ha tenido siempre este comportamiento, por lo que los dos navegadores funcionan ahora igual.

Volver al principio de la página

HTML

Entidades de carácter

Internet Explorer 9 muestra todas las entidades de carácter que Internet Explorer 8 no mostraba:

Correcto en IE9 Incorrecto en IE8 Entidades de carácter
Símbolo Nombre Código Código Descripción
℘ ℘ ℘ ℘ función elíptica de Weierstrass
ℑ ℑ ℑ ℑ parte imaginaria
ℜ ℜ ℜ ℜ parte real
ℵ ℵ ℵ ℵ primer cardinal transfinito (numerable)
↵ ↵ ↵ ↵ retorno de carro
⇐ ⇐ ⇐ ⇐ flecha doble hacia la izquierda
⇑ ⇑ ⇑ ⇑ flecha doble hacia arriba
⇒ ⇒ ⇒ ⇒ flecha doble hacia la derecha
⇓ ⇓ ⇓ ⇓ flecha doble hacia abajo
⇔ ⇔ ⇔ ⇔ flecha doble derecha izquierda
∀ ∀ ∀ ∀ para todo
∃ ∃ ∃ ∃ existe
∅ ∅ ∅ ∅ conjunto vacío
∇ ∇ ∇ ∇ operador nabla
∈ ∈ ∈ ∈ pertenece a
∉ ∉ ∉ ∉ no pertenece a
∋ ∋ ∋ ∋ contiene a
∗ ∗ ∗ ∗ operador asterisco
∝ ∝ ∝ ∝ proporcional a
∠ ∠ ∠ ∠ ángulo
∧ ∧ ∧ ∧ operador lógico y
∨ ∨ ∨ ∨ operador lógico o
∪ ∪ ∪ ∪ unión
∴ ∴ ∴ ∴ por lo tanto
∼ ∼ ∼ ∼ operador tilde
≅ ≅ ≅ ≅ aproximadamente igual a
⊂ ⊂ ⊂ ⊂ subconjunto de
⊃ ⊃ ⊃ ⊃ superconjunto de
⊄ ⊄ ⊄ ⊄ no subconjunto de
⊆ ⊆ ⊆ ⊆ subconjunto de o igual a
⊇ ⊇ ⊇ ⊇ superconjunto de o igual a
⊕ ⊕ ⊕ ⊕ signo más rodeado por un círculo
⊗ ⊗ ⊗ ⊗ signo por rodeado por un círculo
⊥ ⊥ ⊥ ⊥ perpendicular
⋅ ⋅ ⋅ ⋅ operador punto
⟨ ⟨ 〈 〈 corchete angular izquierdo
⟩ ⟩ 〉 〉 corchete angular derecho

Volver al principio de la página

Letra d como letra de acceso a controles de formulario

Internet Explorer 9 puede acceder a un elemento con la letra d como letra de acceso, pero versiones anteriores no podían, ya que utilizaban la combinación Alt+(Shift)+d para acceder a la barra de dirección. Firefox y Chrome sí que puede acceder mediante Alt+Shift+d (la combinación Alt+d accede a la barra de dirección).

Correcto en IE9 Incorrecto en IE8 
<input type="text" name="texto" value="Acceso con d" accesskey="d" />

Nota: Internet Explorer 6 no utilizaba la combinación Alt+(Shift)+d para acceder a la barra de dirección.

Volver al principio de la página

Favicons

Internet Explorer 9 muestra los favicons enlazados con el valor icon para el atributo rel, pero Internet Explorer 8 no lo hacía.

Sintaxis del enlace Tamaño de imagen (píxeles)
16x16 32x32 32x32+16x16
Correcto en Internet Explorer <link rel="shortcut icon" href="cdlibre.ico"/> favicon tamaño 16x16 favicon tamaño 32x32 favicon tamaño 32x32
Correcto en IE9Incorrecto en IE8 <link rel="icon" type="image/png" href="cdlibre.png" /> favicon tamaño 16x16 favicon tamaño 32x32
Correcto en IE9Incorrecto en IE8 <link rel="icon" type="image/vnd.microsoft.icon" href="cdlibre.ico"/> favicon tamaño 16x16 favicon tamaño 32x32 favicon tamaño 32x32

Volver al principio de la página

CSS

:first-letter con imagen flotante

Si un párrafo con pseudo-elemento :first-letter contiene una imagen flotante al principio del párrafo, Internet Explorer modifica el aspecto de la primera letra de texto, pero Internet Explorer 8 no lo hacía.

Nota: En realidad no tengo claro si quien lo hace bien es Internet Explorer 9 o Internet Explorer 8. IE9 lo hace como Chrome, pero IE8 lo hace como Firefox.

Incorrecto en IE9Correcto en IE8 
p:first-letter { 
  color: red; 
}

img {
  float: right;
}

Smiley La primera letra de este párrafo se ve en rojo en Internet Explorer 9, pero no se veía en rojo en Internet Explorer 8. El párrafo contiene una imagen al princio (aunque la imagen se vea a la derecha porque tiene float: right).

Pero la primera de este párrafo se ve en rojo en ambos.
Incorrecto en IE9Correcto en IE8 
p:first-letter { 
  color: red; 
}

img {
  float: lef;
}

Smiley La primera letra de este párrafo se ve en rojo en Internet Explorer 9, pero no se veía en rojo en Internet Explorer 8. El párrafo contiene una imagen al princio (aunque la imagen se vea a la izquierda porque tiene float: left).

Pero la primera de este párrafo se ve en rojo en ambos.

Volver al principio de la página

Varios contadores con content, counter-increment y counter-reset

Internet Explorer 9 puede mostrar varios contadores simultáneamente, pero Internet Explorer 8 no lo hacía.

Correcto en IE9Incorrecto en IE8 
h4 { 
  counter-reset: cuenta-parrafos; 
  counter-reset: cuenta-apartados; 
}

h5 { 
  counter-reset: cuenta-parrafos; 
}

h5:before { 
  content: counter(cuenta-apartados, upper-alpha)". ";
  counter-increment: cuenta-apartados; 
} 

p:before { 
  content: counter(cuenta-apartados, upper-alpha)"-"counter(cuenta-parrafos)". ";
  counter-increment: cuenta-parrafos; 
}

Ejemplo de contadores

Apartado 1

Este párrafo es un párrafo <p> normal y corriente.

Este párrafo es un párrafo <p> normal y corriente.

Este párrafo es un párrafo <p> normal y corriente.

Apartado 2

Este párrafo es un párrafo <p> normal y corriente.

Este párrafo es un párrafo <p> normal y corriente.

Volver al principio de la página

Códigos de colores HSL

Internet Explorer 9 reconoce el modelo de color HSL, pero Internet Explorer 8 no lo hacía.

Correcto en IE9Incorrecto en IE8 
p { 
  background-color: hsl(153, 80%, 40%)
}

Si algo puede ir mal, irá mal.

Volver al principio de la página

Fuentes WOFF (Web Open Font Format)

Internet Explorer 9 admite fuentes en formato WOFF, pero Internet Explorer 8 no lo hacía.

Correcto en IE9 Incorrecto en IE8 
@font-face {
  font-family: "Orbitron-medium";
  src: url("../varios/fuentes_web/orbitron_medium.woff")
}

p {
  font-family: Orbitron-medium;
  font-size: 150%;
}

Esto es un párrafo con fuente web Orbitron Medium al 150%.

Volver al principio de la página

Bordes redondeados: border-radius

Internet Explorer 9 reconoce la propiedad border-radius, pero Internet Explorer 8 no lo hacía.

Correcto en IE9Incorrecto en IE8 
blockquote { 
  padding: 3px 10px; 
  border: PowderBlue solid 5px; 
  border-radius: 20px; 
}

Si algo puede ir mal, irá mal.

Murphy
Correcto en IE9Incorrecto en IE8 
blockquote { 
  padding: 3px 10px; 
  border: PowderBlue solid 5px; 
  border-top-left-radius: 20px; 
  border-bottom-right-radius: 20px; 
}

Si algo puede ir mal, irá mal.

Murphy

Volver al principio de la página

Imágenes de fondo múltiples: background

Internet Explorer 9 admite varias imágenes en la propiedad background, pero Internet Explorer 8 no lo hacía.

Correcto en IE9Incorrecto en IE8 
div { 
  border: black 2px solid;
  background: url("naranja.png") repeat-x bottom, url("azul.png"), ;
}

Estos párrafos están en una división.

Estos párrafos están en una división.

Estos párrafos están en una división.

Estos párrafos están en una división.

Nota: Esta propiedad está comentada en http://helephant.com/2009/11/css3-multiple-background-images/.

Volver al principio de la página

Opacidad: opacity

Internet Explorer 9 admite la propiedad opacity, pero Internet Explorer 8 no lo hacía.

Correcto en IE9Incorrecto en IE8 
p1 { 
  background-color: lightblue; 
}

p2 { 
  background-color: lightyellow;
  opacity: 0.5; 
}

/* En el ejemplo también se utilizan propiedades de posicionamiento que no aparecen aquí. */

Este texto se encuentra situado a la izquierda, a la izquierda, a la izquierda, a la izquierda, a la izquierda, a la izquierda, a la izquierda, a la izquierda, a la izquierda

Este texto se encuentra situado a la derecha, a la derecha, a la derecha, a la derecha, a la derecha, a la derecha, a la derecha, a la derecha, a la derecha

Volver al principio de la página

Las pseudo-clases de enlace :link y :visited

Internet Explorer 9 no permite modificar cualquier propiedad mediante la pseudo clase :visited, pero Internet Explorer 8 lo permitía, lo que permitía a sitios maliciosos averiguar las páginas visitadas por el usuario.

Correcto en IE9Incorrecto en IE8 
a:visited { 
  background-color: yellow; 
  color: red;
  font-weight: bold; 
  text-decoration: line-through; 
}

Este párrafo tiene un enlace a sí mismo. Si el navegador reconoce que el enlace se ha visitado, en vez de subrayado, se muestra de color rojo, con fondo amarillo, en negrita y tachado.

Volver al principio de la página

Otros lenguajes de marcas

SVG

Internet Explorer 9 es capaz de mostrar gráficos SVG como objetos externos o internos, pero Internet Explorer 8 no lo hacía.

Correcto en IE9 Incorrecto en IE8 
<object 
  data="ejemplo.svg" 
  type="image/svg+xml">
</object>

Nota: En Internet Explorer 9 los atributos height y width establecen el tamaño de la imagen, pero en Internet Explorer 8 o anteriores con plug-ins instalados los atributos height y width establecen el tamaño del área visible, sin cambiar el tamaño de la imagen.

Correcto en IE9 Incorrecto en IE8 La siguiente página muestra un ejemplo de SVG incluido en una página:

Volver al principio de la página

Esta página forma parte del curso "Páginas web HTML / XHTML y hojas de estilo CSS" disponible en http://www.mclibre.org
Autor: Bartolomé Sintes Marco
Última modificación: 15 de enero de 2012

Creative Commons License
Esta obra está bajo una licencia de Creative Commons Reconocimiento-CompartirIgual 3.0 España.