# Diferencias 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:

Entidades de carácter
Símbolo | Nombre | Código | Código | Descripción
--- | --- | --- | --- | ---
℘ | &weierp; | &#8472; | &#x2118; | función elíptica de Weierstrass
ℑ | &image; | &#8465; | &#x2111; | parte imaginaria
ℜ | &real; | &#8476; | &#x211C; | parte real
ℵ | &alefsym; | &#8501; | &#x2135; | primer cardinal transfinito (numerable)
↵ | &crarr; | &#8629; | &#x21b5; | retorno de carro
⇐ | &lArr; | &#8656; | &#x21d0; | flecha doble hacia la izquierda
⇑ | &uArr; | &#8657; | &#x21d1; | flecha doble hacia arriba
⇒ | &rArr; | &#8658; | &#x21d2; | flecha doble hacia la derecha
⇓ | &dArr; | &#8659; | &#x21d3; | flecha doble hacia abajo
⇔ | &hArr; | &#8660; | &#x21d4; | flecha doble derecha izquierda
∀ | &forall; | &#8704; | &#x2200; | para todo
∃ | &exist; | &#8707; | &#x2203; | existe
∅ | &empty; | &#8709; | &#x2205; | conjunto vacío
∇ | &nabla; | &#8711; | &#x2207; | operador nabla
∈ | &isin; | &#8712; | &#x2208; | pertenece a
∉ | &notin; | &#8713; | &#x2209; | no pertenece a
∋ | &ni; | &#8715; | &#x220b; | contiene a
∗ | &lowast; | &#8727; | &#x2217; | operador asterisco
∝ | &prop; | &#8733; | &#x221d; | proporcional a
∠ | &ang; | &#8736; | &#x2220; | ángulo
∧ | &and; | &#8743; | &#x2227; | operador lógico y
∨ | &or; | &#8744; | &#x2228; | operador lógico o
∪ | &cup; | &#8746; | &#x222a; | unión
∴ | &there4; | &#8756; | &#x2234; | por lo tanto
∼ | &sim; | &#8764; | &#x223c; | operador tilde
≅ | &cong; | &#8773; | &#x2245; | aproximadamente igual a
⊂ | &sub; | &#8834; | &#x2282; | subconjunto de
⊃ | &sup; | &#8835; | &#x2283; | superconjunto de
⊄ | &nsub; | &#8836; | &#x2284; | no subconjunto de
⊆ | &sube; | &#8838; | &#x2286; | subconjunto de o igual a
⊇ | &supe; | &#8839; | &#x2287; | superconjunto de o igual a
⊕ | &oplus; | &#8853; | &#x2295; | signo más rodeado por un círculo
⊗ | &otimes; | &#8855; | &#x2297; | signo por rodeado por un círculo
⊥ | &perp; | &#8869; | &#x22a5; | perpendicular
⋅ | &sdot; | &#8901; | &#x22c5; | operador punto
⟨ | &lang; | &#9001; | &#x2329; | corchete angular izquierdo
⟩ | &rang; | &#9002; | &#x232a; | 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).

    <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
| <link rel="shortcut icon" href="cdlibre.ico"/> |  |  |
| <link rel="icon" type="image/png" href="cdlibre.png" /> |  |  |
| <link rel="icon" type="image/vnd.microsoft.icon" href="cdlibre.ico"/> |  |  |

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.

    p:first-letter {
      color: red;
    }

    img {
      float: right;
    }
| 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.
    p:first-letter {
      color: red;
    }

    img {
      float: lef;
    }
| 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.

    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.

    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.

    @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.

    blockquote {
      padding: 3px 10px;
      border: PowderBlue solid 5px;
      border-radius: 20px;
    }
| Si algo puede ir mal, irá mal. Murphy
    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.

    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.

    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.

    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.

    <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.

| La siguiente página muestra un ejemplo de SVG incluido en una página: Estrella

Volver al principio de la página

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