Diferencias entre
Internet Explorer 7 y 6Diferencias entre
Internet Explorer 7 y 6Internet 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.
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
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.
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.
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. |
IE6 no mostraba correctamente las imágenes en formato PNG con transparencia alfa. IE7 sí que lo hace.
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. |
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.
| Internet Explorer 6 | Internet Explorer 7 |
 |
 |
Nota: Firefox e IE7 no interpretan exactamente igual estas etiquetas
Internet Explorer 7 sí que muestra el padding en las imágenes, pero Internet Explorer 6 no lo hacía.
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,
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.
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; } |
|
||||
  |
div { text-align: center; } table { } |
|
||||
| |
div { text-align: center; } table { margin-left: auto; margin-right: auto; text-align: left; } caption { margin-left: auto; margin-right: auto; } |
|
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"?>
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" /> |
La etiqueta <label> sin atributo for funciona en IE7 pero no funcionaba en Internet Explorer 6.
| |
<label><input type="checkbox" />Casilla 1</label> | |
| |
<label>Nombre: <input type="text" /></label> |
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.
| Internet Explorer 6 | Internet Explorer 7 |
 |
 |
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.
Autor: Bartolomé Sintes Marco