# Diferencias entre Internet Explorer 7 y 6

Internet Explorer 7 aporta bastantes novedades con respecto a Internet Explorer 6. Muchas están relacionadas con la interfaz de usuario (pestañas, anti-phising, RSS, barra de búsqueda, etc), pero también ha mejorado el soporte de las recomendaciones del W3C. En esta página se comentan algunas de esas diferencias.

Nota: Faltan por poner bastantes diferencias y añadir capturas en algunos de ellos.

## Instalar IE6 e IE7 en el mismo ordenador

Con el tiempo, IE6 dejará de utilizarse, pero mientras tanto todavía hay un porcentaje significativo de usuarios de IE6, por lo que a la hora de diseñar un sitio web es importante tener en cuenta a esos usuarios.

El problema es que Internet Explorer 7 se instala sobre Internet Explorer 6, por lo que en principio no se pueden tener las dos versiones instaladas simultáneamente en el mismo ordenador, lo que complica la prueba de un sitio web en ambos navegadores.

Una forma sencilla (aunque con limitaciones) de poder utilizar ambos navegadores en el mismo ordenador es instalar una versión standalone de IE6, como la que se puede descargar de la web Evolt.org, concretamente de la página http://browsers.evolt.org/?ie/32bit/standalone.

Esa versión IE6 standalone no funciona exactamente igual que el IE6 original, seguramente porque el navegador utiliza funciones de Windows que se modifican al instalar IE7. Por ejemplo, aunque IE6 no es capaz de mostrar correctamente imágenes en formato PNG con transparencia parcial, al instalar IE7, que sí lo hace, la versión IE6 standalone ya muestra las imágenes correctamente.

Comentado en http://www.456bereastreet.com/archive/200605/testing_in_both_ie_6_and_ie_7/ y http://www.positioniseverything.net/articles/multiIE.html

http://tredosoft.com/Multiple_IE

Volver al índice

## Utilización del navegador

### Tamaño del texto

En IE6 la combinación `Ctrl+rueda del ratón` cambiaba el tamaño del texto entre los 5 valores posibles que se encuentran en el menú Ver > Tamaño de texto (Muy grande, Grande, Mediano, Pequeño, Muy pequeño).

En IE7 la combinación `Ctrl+rueda del ratón` permite ampliar o reducir una página, pero esta ampliación/reducción se aplica a todos los elementos de la página (texto, imágenes, etc) y no únicamente al texto.

La combinación `Ctrl+rueda del ratón` funciona en IE7 al revés que en IE6, es decir, que en IE6 cuando la rueda se desplazaba hacia atrás (hacia el usuario) el tipo de letra aumentaba, mientras que en IE7 todo se ve más pequeño.

Volver al índice

## Selectores

El selector de hijos E > F funciona en IE7, pero no funcionaba en IE6. Para ver la diferencia, se puede abrir la página sobre selectores CSS en ambos navegadores.

El selector de hijos E + F funciona en IE7, pero no funcionaba en IE6. Para ver la diferencia, se puede abrir la página sobre selectores CSS en ambos navegadores.

Volver al índice

## Pseudo-clases y pseudo-elementos

La pseudo-clase :first-child funciona en IE7, pero no funcionaba en IE6. Para ver la diferencia, se puede abrir la página sobre pseudo-clases en ambos navegadores.

La pseudo-clase :hover funciona en IE7, pero únicamente funcionaba en IE 6 cuando se aplicaba a enlaces.

| p { color: black; background-color: white; } a:hover { color: white; background-color: black; } | Este párrafo está escrito en negro sobre blanco, pero cuando pasas el ratón por encima de este enlace, el enlace se escribe blanco sobre negro.
| p { color: black; background-color: white; } p:hover { color: white; background-color: black; } | Este párrafo está escrito en negro sobre blanco, pero cuando pasas el ratón por encima del párrafo, se escribe blanco sobre negro.

Volver al índice

## PNG con transparecia alfa

IE6 no mostraba correctamente las imágenes en formato PNG con transparencia alfa. IE7 sí que lo hace.

Volver al índice

## Bordes no válidos

Si al definir un borde no se escribe la unidad correspondiente al grosor del borde, IE7 no dibuja el borde, pero IE sí que lo hacía.

| p { border: black 5 solid; } /* El grosor no está escrito correctamente, falta la unidad */ | Este párrafo tiene un borde escrito incorrectamente, por lo que no debería verse.

Volver al índice

## Bordes en <html> y <body>

IE7 e IE6 interpretan de manera distinta los bordes en las etiquetas <html> y <body>. Para ver las diferencias, se puede abrir la siguiente página de ejemplo de bordes en ambos navegadores y comparar el resultado.

IE7 muestra tanto el borde de <html> como el de <body>. Además si el contenido no cabe en la ventana y es necesario utilizar la barra de desplazamiento, los bordes inferiores no se ven hasta que uno se desplaza al final de la página.

IE6 mostraba ambos bordes de la misma manera, así que si se definían ambos sólo se mostraba uno de ellos, concretamente el borde de <body>. Además, era un borde que se mostraba siempre pegado a la ventana, independientemente del contenido, hasta el punto que la barra de desplazamiento vertical aparecía dentro del borde. Por si fuera poco, interpretaba el margin como el padding y mostraba un relleno igual a la suma del margen y del relleno.

Estas capturas corresponden a la página Border en html y body
Internet Explorer 6 | Internet Explorer 7

Nota: Firefox e IE7 no interpretan exactamente igual estas etiquetas

Volver al índice

## Padding en imágenes

Internet Explorer 7 sí que muestra el padding en las imágenes, pero Internet Explorer 6 no lo hacía.

Volver al índice

## Enlaces

### Enlaces a divisiones

Cuando el destino de un enlace es una división, Internet Explorer 6 no saltaba al principio de la división, sino al primer elemento que haya en ella. Internet Explorer 7 sí que salta al principio de la división. La diferencia es que en IE7 se ve el borde superior de la división y en IE6 no.

Para ver la diferencia, se puede abrir la página del ejercicio Londres en ambos navegadores y pulsar uno de los enlaces de esa página,

Volver al índice

### Enlaces a <body>

Cuando el destino de un enlace es el elemento <body>, Internet Explorer 6 no saltaba al principio de la página. Internet Explorer 7 sí que salta al principio de la página. Para ver las diferencias, se puede abrir la página de ejemplo de enlaces a body y html en ambos navegadores y comparar el resultado.

Volver al índice

## Alineación de una tabla

Las propiedades margin-left: auto y margin-right: auto para centrar una tabla y su leyenda funcionan en IE7, pero no funcionaban en IE6.

Para centrar una tabla en IE6 había que insertar la tabla en una división y centrar el contenido de la división. De esta manera IE6 centraba la tabla, pero no el contenido de la tabla. Aunque esta solución funciona también en IE7, no funciona en Firefox, que no centra la tabla pero sí el contenido de la tabla. Para que se vea de la misma manera en los tres navegadores, hay que añadir las propiedades necesarias para centrar la tabla y para alinear el texto a la izquierda, como muestra el siguiente ejemplo:

| table { margin-left: auto; margin-right: auto; } caption { margin-left: auto; margin-right: auto; } |
Esto es la leyenda
Casilla 1, con más texto | Casilla 2
Casilla 3 | Casilla 4, con más texto
| div { text-align: center; } table { } |
Esto es la leyenda
Casilla 1, con más texto | Casilla 2
Casilla 3 | Casilla 4, con más texto
| div { text-align: center; } table { margin-left: auto; margin-right: auto; text-align: left; } caption { margin-left: auto; margin-right: auto; } |
Esto es la leyenda
Casilla 1, con más texto | Casilla 2
Casilla 3 | Casilla 4, con más texto

Nota: Internet Explorer 6 sí que entendía las propiedades margin-left y margin-right con el valor auto si la página no contenía la primera línea habitual (pero no obligatoria) en los documentos XHTML:

    1  <?xml version="1.0" encoding="iso-8859-1"?>

Volver al índice

## Formularios

### Tecla de acceso Alt+d

Internet Explorer 7 reserva la combinación Alt+d para acceder a la barra de dirección, mientras que Internet Explorer 6 permitía utilizarla como tecla de acceso para acceder a un elemento de un formulario.

| <input type="text" value="Acceso con d" accesskey="d" /> |

Volver al índice

### Etiqueta <label>

La etiqueta <label> sin atributo for funciona en IE7 pero no funcionaba en Internet Explorer 6.

| <label><input type="checkbox" />Casilla 1</label> | Casilla 1
| <label>Nombre: <input type="text" /></label> | Nombre:

Volver al índice

## Posicionamiento

### Posicionamiento fijo: position: fixed

El posicionamiento fijo funciona en IE7 pero no funcionaba en IE6. Para ver las diferencias, se puede abrir la página de ejemplo de posicionamiento fijo en ambos navegadores y comparar el resultado.

Estas capturas corresponden a la página ejemplo de posicionamiento fijo
Internet Explorer 6 | Internet Explorer 7

Volver al índice

### Posicionamiento absoluto: position: absolute

El posicionamiento absoluto funciona en IE7, pero no funcionaba correctamente en IE6.

El problema es que IE6 descontaba el border y el padding del tamaño del elemento, cuando la recomendación dice que el border y el padding se añaden al tamaño del elemento.

La recomendación CSS2 del W3C establece que el relleno (padding), el borde (border) y el margen (margin) se añaden al tamaño definido para el elemento (por ejemplo, con las propiedades width y height).

Internet Explorer 6 incluía el borde (border) y el relleno (padding) dentro del elemento, en vez de añadirlo.

La página de ejemplo de tamaño de elemento muestra varias divisiones con el mismo tamaño, pero con diferentes rellenos, bordes y márgenes. El fondo cuadriculado permite comparar el tamaño total de cada división. Hay que tener en cuenta que las divisiones con margen parecen desplazadas de su posición.

Para ver las diferencias, se puede abrir la página de ejemplo de tamaño de elemento en ambos navegadores y comparar el resultado.

Volver al índice