Diferencias entre Internet Explorer 7 y 6

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

La solución que propone Microsoft es utilizar máquinas virtuales. La plataforma de virtualización de Microsoft se llama VirtualPC y actualmente (septiembre de 2007) la última versión publicada es Virtual PC 2007 de febrero de 2007. Microsoft también proporciona imágenes con Windows XP SP2 e IE 6 o IE 7. Actualmente (septiembre de 2007) la última versión publicada es de agosto de 2007.

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.

Correcto en Internet Explorer 7 Incorrecto en IE6 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.

Correcto en Internet Explorer 7 Incorrecto en IE6 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.

Correcto en Internet Explorer 7 Incorrecto en IE6 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


Etiquetas <abbr> y <acronym>

IE7 añade un subrayado discontinuo a las etiquetas <abbr> y <acronym>, pero IE6 no lo hacía.

Volver al índice


Etiquetas en html y body

Color de fondo en html y body

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

IE7 muestra tanto el color de fondo de html como el de body. El color de fondo de body abarca únicamente la porción de la ventana con contenido (texto o imágenes), mientras que el resto se muestra con el color de fondo de html.

IE6 mostraba toda la ventana con el color de fondo de body.

Estas capturas corresponden a la página Border en html y body
Internet Explorer 6 Internet Explorer 7
IE 6 - Background-color en html y body IE 7 - Background-color en html y body

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 margen interior igual a la suma del margen exterior y del interior.

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

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


Fondos

La propiedad background-attachment : fixed

Ni Firefox ni Internet Explorer 7 muestran la imagen de fondo en el segundo ejemplo siguiente, en el que la propiedad background-attachment tiene el valor fixed. Internet Explorer 6 mostraba los dos ejemplos como Interent Explorer muestra el primero.

Correcto en Firefox Correcto en Internet Explorer 7
Correcto en IE6
div { background-image: url(“verde.jpg”);
background-repeat: no-repeat;
background-position: right top;
background-attachment: scroll;}
Este cuadro tiene una imagen como fondo. Si el texto no cabe en el cuadro, el navegador muestra unas barras de desplazamiento (en este caso, verticales). Si no ves las barras de desplazamiento, aumenta el tamaño de la fuente o reduce el tamaño de la ventana hasta que aparezcan las barras de desplamiento.A continuación, desplaza el texto arriba y abajo y verás cómo la imagen se desplaza junto con el texto.

Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido.

Incorrecto en Firefox Incorrecto en Internet Explorer 7Incorrecto en IE6 div { background-image: url(“verde.jpg”);
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;}
Este cuadro tiene una imagen como fondo. Si el texto no cabe en el cuadro, el navegador muestra unas barras de desplazamiento (en este caso, verticales). Si no ves las barras de desplazamiento, aumenta el tamaño de la fuente o reduce el tamaño de la ventana hasta que aparezcan las barras de desplamiento.A continuación, desplaza el texto arriba y abajo y verás cómo la imagen se desplaza junto con el texto.

Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido.

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:

Correcto en Firefox Correcto en Internet Explorer 7 Incorrecto en IE6 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
Incorrecto en Firefox Correcto en Internet Explorer 7 Correcto en IE6 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
Correcto en Firefox Correcto en Internet Explorer 7 Correcto en IE6 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.

Correcto en Firefox Incorrecto en Internet Explorer 7 Correcto en IE6 <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.

Correcto en Firefox Correcto en Internet Explorer 7 Incorrecto en IE6 <label><input type=”checkbox” />Casilla 1</label> Casilla 1
Correcto en Firefox Correcto en Internet Explorer 7 Incorrecto en IE6 <label>Nombre: <input type=”text” /></label> Nombre:

Volver al índice


Tamaño

Ver Apartado Posicionamiento absoluto: position: absolute

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
IE 6 - Position: fixed IE 7 - Position: fixed

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 margen interior (padding), el borde (border) y el margen exterior (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 margen interior (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 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.

Por Adriana Gonzalez
Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: