Diferencias entre Internet Explorer 7 e Internet
Explorer 6Diferencias entre Internet Explorer 7 e Internet
Explorer 6Internet Explorer 7 aportó bastantes novedades con respecto a Internet Explorer 6. Muchas estaban relacionadas con la interfaz de usuario (pestañas, anti-phising, RSS, barra de búsqueda, etc), pero también se mejoró el soporte de las recomendaciones del W3C. En esta página se comentan algunas de esas diferencias.
Nota: Esta página no pretende ser una relación exhaustiva de diferencias entre IE7 e IE6, sino simplemente recopilar las diferencias que he ido encontrando al redactar estos apuntes.
En IE7 la combinación Ctrl+rueda del ratón permitía ampliar o reducir una página, pero esta ampliación/reducción se aplicaba a todos los elementos de la página (texto, imágenes, etc) y no únicamente al texto.
En IE6 la combinación Ctrl+rueda del ratón cambiaba el tamaño del texto entre los 5 valores posibles que se encuentraban en el menú Ver > Tamaño de texto (Muy grande, Grande, Mediano, Pequeño, Muy pequeño).
La combinación Ctrl+rueda del ratón funcionaba 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ía más pequeño.
Volver al principio de la página
IE7 mostraba correctamente las imágenes en formato PNG con transparencia alfa, pero IE6 no lo hacía.
Volver al principio de la página
IE7 añadía un subrayado discontinuo a las etiquetas <abbr> y <acronym>, pero IE6 no lo hacía.
Volver al principio de la página
Cuando el destino de un enlace es el elemento <body>, IE7 saltaba al principio de la página, pero IE6 no lo hacía. 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 principio de la página
La lista siguiente se veía de forma distinta en IE7 y en IE6:
Se trata de una lista no ordenada dentro de otra lista no ordenada. La lista superior no contiene ningún texto, salvo la lista inferior. IE7 sólo mostraba un marcador, mientras que IE6 mostraba dos marcadores a distinta altura.
Volver al principio de la página
IE7 reservaba la combinación Alt+d para acceder a la barra de dirección, mientras que IE6 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 principio de la página
La asociación implícita, es decir, la etiqueta label sin atributo for, funcionaba en IE7 pero no funcionaba en IE6.
  |
<label><input type="checkbox" />Casilla 1</label> | |
| |
<label>Nombre: <input type="text" /></label> |
Volver al principio de la página
El selector de hijos E > F funcionaba 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 funcionaba 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 principio de la página
La pseudo-clase :first-child funcionaba 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 funcionaba en IE7, pero únicamente funcionaba en IE6 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 principio de la página
Si al definir un borde no se escribía la unidad correspondiente al grosor del borde, IE7 no dibujaba el borde, pero IE6 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 principio de la página
IE7 e IE6 interpretaban 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 mostraba tanto el color de fondo de <html> como el de <body>. El color de fondo de <body> abarcaba únicamente la porción de la ventana con contenido (texto o imágenes), mientras que el resto se mostraba con el color de fondo de <html>.
IE6 mostraba toda la ventana con el color de fondo de <body>.
| Internet Explorer 7 | Internet Explorer 6 |
|---|---|
 |
 |
Volver al principio de la página
IE7 e IE6 interpretaban 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 mostraba tanto el borde de <html> como el de <body>. Además si el contenido no cabía en la ventana y era necesario utilizar la barra de desplazamiento, los bordes inferiores no se veían hasta que uno se desplazaba 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.
| Internet Explorer 7 | Internet Explorer 6 |
|---|---|
 |
 |
Volver al principio de la página
IE7 mostraba correctamente los márgenes exteriores y interiores de <html> y <body>, pero en versiones anteriores no lo hacía. Las capturas de pantalla siguientes muestran cómo se veía una página de ejemplo en estos navegadores:
| Internet Explorer 7 | Internet Explorer 6 |
|---|---|
 |
 |
Nota: Aunque IE7 mostraba correctamente los márgenes exteriores y interiores de <html> y <body>, no mostraba correctamente las imágenes de fondo en <html>, como se comenta en la página de diferencias entre IE8 e IE7.
Volver al principio de la página
IE7 sí que mostraba el padding en las imágenes, pero IE6 no lo hacía.
Volver al principio de la página
IE7 mostraba correctamente la imagen de fondo en el segundo ejemplo siguiente, en el que la propiedad background-attachment tiene el valor fixed (sólo debe verse cuando el ejemplo está situado en la parte superior derecha de la pantalla, porque la posición se debe interpretar con respecto a la ventana, no respecto al elemento contenedor). IE6 mostraba los dos ejemplos de la misma manera, es decir, como IE7 mostraba el primero.
| |
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. |
| |
div { background-image: url("verde.jpg"); background-repeat: no-repeat; background-position: right top; background-attachment: fixed;} |
Este cuadro tiene una imagen como fondo. Pero como
background-attachment es fixed, la posición de la imagen de fondo es
respecto a la ventana, no respecto a la división. Para ver la imagen de
fondo, la división debe estar situada en la parte superior derecha de
la ventana, independientemente de la posición de la barra de
desplazamiento.
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 permanece fija. 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 principio de la página
Las propiedades margin-left: auto y margin-right: auto para centrar una tabla y su leyenda funcionaban 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 funcionaba también en IE7, no funciona en Firefox, que no centra la tabla pero sí el contenido de la tabla. Para que se viera de la misma manera en los tres navegadores, había 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: IE6 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 principio de la página
Ver Apartado Posicionamiento absoluto: position: absolute
Volver al principio de la página
El posicionamiento fijo funcionaba 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 7 | Internet Explorer 6 |
|---|---|
 |
 |
Volver al principio de la página
Tanto IE7 como IE6 posicionaban incorrectamente una tabla posicionada con position: fixed. IE6 no le aplicaba ningún posicionamiento. IE7 posicionaba la leyenda, pero no el resto de la tabla, como muestra la siguiente página de ejemplo.
Volver al principio de la página
IE7 posiciona correctamente un elemento posicionado con top y bottom, pero IE6 no lo hacía. IE6 necesitaba las propiedades top y height (o bottom y height), como muestra la siguiente página de ejemplo.
Las capturas siguientes corresponden a la página de ejemplo anterior.
| Internet Explorer 7 | Internet Explorer 6 |
|---|---|
 |
 |
Volver al principio de la página
IE7 posiciona correctamente un elemento posicionado con left y right, pero IE6 no lo hacía. IE6 necesitaba las propiedades left y width (o right y width)
Volver al principio de la página
El posicionamiento absoluto funcionaba 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).
IE6 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.
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 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
Esta obra está bajo una licencia de Creative
Commons Reconocimiento-CompartirIgual 3.0 España.