Diferencias
entre Internet Explorer 8 e Internet Explorer 7Diferencias
entre Internet Explorer 8 e Internet Explorer 7Internet Explorer 8 aporta bastantes novedades con respecto a Internet Explorer 7. Las más visibles están relacionadas con la interfaz de usuario (modo privado, aceleradores, web slices, etc.) pero también ha mejorado mucho el soporte de las recomendaciones del W3C (HTML Y CSS). En esta página se comentan algunas de esas diferencias.
Microsoft mantiene una web con información sobre las novedades de Internet Explorer 8.
Con el tiempo, las versiones antiguas de IE dejarán de utilizarse, pero mientras tanto 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 2009) la última versión publicada es Virtual PC 2007 SP1 de mayo de 2008. Microsoft también proporciona imágenes con Windows XP SP3 e IE6, IE7 o IE8. Actualmente (octubre de 2009) las últimas versiones publicadas son de agosto de 2009 (y caducan en enero de 2010).
Microsoft también Microsoft Expression Web SuperPreview para Internet Explorer, 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 (noviembre de 2009), la versión 1.6.0.3 de octubre de 2009, permite instalar 13 versiones de Internet Explorer, de la 1 a la 8.
Volver al principio de la página
El zoom de Internet Explorer 8 cambia el tamaño de letra y de las imágenes y redibuja la página, mientras que el zoom de Internet Explorer 7 ampliaba o reducía todo sin redibujar la página.
Es decir, que si un párrafo de texto ocupa casi una línea, al ampliar en IE8, el párrafo ocupará dos o más líneas, mientras que en IE7 se seguía viendo una línea, pero mucho más ancha (y aparecían las barras de desplazamiento horizontal en el navegador). Y si un párrafo de texto ocupa varias líneas, al reducir en IE8, el párrafo ocupará menos líneas, mientras que en IE7 se seguía viendo el mismo número de líneas (y aparecía un espacio en blanco a la derecha).
Volver al principio de la página
Cuando se abre un enlace en una nueva pestaña (Ctrl+botón central del ratón), Internet Explorer 8 abre la nueva pestaña al final de todas las pestañas, mientras que Internet Explorer 7 la abría a continuación de la pestaña en la que se encuentra el enlace. Esa diferencia se nota cuando se tienen varias pestañas abiertas. Por ejemplo, si se tienen 3 pestañas abiertas y se abre un enlace de la primera pestaña en una nueva pestaña, Internet Explorer 8 crea la nueva pestaña en la cuarta posición, mientras que Internet Explorer 7 abría la nueva pestaña en la segunda posición, desplazando las dos pestañas restantes.
Volver al principio de la página
Internet Explorer 8 ya permite seleccionar las hojas de estilo alternativas o desactivar la hoja de estilo, pero en versiones anteriores no lo hacía.
Volver al principio de la página
Si una página cabe en la ventana, Internet Explorer 8 no muestra la barra de desplazamiento vertical, pero Internet Explorer 7 sí que lo hacía (mostraba la barra de desplazamiento desactivada.
Volver al principio de la página
Internet Explorer 8 ya muestra todas las entidades de carácter, pero en versiones anteriores no lo hacía. La tabla siguiente muestra las entidades de carácter que IE7 no mostraba.
| Símbolo | Nombre | Código | Código | Descripción |
|---|---|---|---|---|
| ℘ | ℘ | ℘ | ℘ | función elíptica de Weierstrass |
| ℑ | ℑ | ℑ | ℑ | parte imaginaria |
| ℜ | ℜ | ℜ | ℜ | parte real |
| ℵ | ℵ | ℵ | ℵ | primer cardinal transfinito (numerable) |
| ↵ | ↵ | ↵ | ↵ | retorno de carro |
| ⇐ | ⇐ | ⇐ | ⇐ | flecha doble hacia la izquierda |
| ⇑ | ⇑ | ⇑ | ⇑ | flecha doble hacia arriba |
| ⇒ | ⇒ | ⇒ | ⇒ | flecha doble hacia la derecha |
| ⇓ | ⇓ | ⇓ | ⇓ | flecha doble hacia abajo |
| ⇔ | ⇔ | ⇔ | ⇔ | flecha doble derecha izquierda |
| ∀ | ∀ | ∀ | ∀ | para todo |
| ∃ | ∃ | ∃ | ∃ | existe |
| ∅ | ∅ | ∅ | ∅ | conjunto vacío |
| ∇ | ∇ | ∇ | ∇ | operador nabla |
| ∈ | ∈ | ∈ | ∈ | pertenece a |
| ∉ | ∉ | ∉ | ∉ | no pertenece a |
| ∋ | ∋ | ∋ | ∋ | contiene a |
| ∗ | ∗ | ∗ | ∗ | operador asterisco |
| ∝ | ∝ | ∝ | ∝ | proporcional a |
| ∠ | ∠ | ∠ | ∠ | ángulo |
| ∧ | ∧ | ∧ | ∧ | operador lógico y |
| ∨ | ∨ | ∨ | ∨ | operador lógico o |
| ∪ | ∪ | ∪ | ∪ | unión |
| ∴ | ∴ | ∴ | ∴ | por lo tanto |
| ∼ | ∼ | ∼ | ∼ | operador tilde |
| ≅ | ≅ | ≅ | ≅ | aproximadamente igual a |
| ⊂ | ⊂ | ⊂ | ⊂ | subconjunto de |
| ⊃ | ⊃ | ⊃ | ⊃ | superconjunto de |
| ⊄ | ⊄ | ⊄ | ⊄ | no subconjunto de |
| ⊆ | ⊆ | ⊆ | ⊆ | subconjunto de o igual a |
| ⊇ | ⊇ | ⊇ | ⊇ | superconjunto de o igual a |
| ⊕ | ⊕ | ⊕ | ⊕ | signo más rodeado por un círculo |
| ⊗ | ⊗ | ⊗ | ⊗ | signo por rodeado por un círculo |
| ⊥ | ⊥ | ⊥ | ⊥ | perpendicular |
| ⋅ | ⋅ | ⋅ | ⋅ | operador punto |
| ⟨ | ⟨ | 〈 | 〈 | corchete angular izquierdo |
| ⟩ | ⟩ | 〉 | 〉 | corchete angular derecho |
Volver al principio de la página
<q>
Internet Explorer 8 ya muestra correctamente la etiqueta <q> (añadiendo comillas al texto), pero en versiones anteriores no lo hacía.
   |
<p>Como escribió Robert Browning, <q>The best is yet to be</q>.</p> |
Como escribió Robert Browning, |
| |
<p>Como escribió Robert Browning, "<q>The best is yet to be</q>".</p> |
Como escribió Robert Browning, " |
Volver al principio de la página
Internet Explorer 8 ya no muestra el atributo alt en forma de "tip" si no está definido el atributo title, pero en versiones anteriores sí que lo hacía.
| |
<img alt="Este es el atributo alt de una imagen que sólo tiene atributo alt" src="tux.jpg" /> |
 |
|
<img alt="Este es el atributo alt de una imagen que tiene los atributos alt y title" title="Este es el atributo title de una imagen que tiene los atributos alt y title" src="tux.jpg" /> |
|
Volver al principio de la página
En Internet Explorer 8 la propiedad color no da color a la línea, pero en Internet Explorer 7 daba color a la línea entera (borde e interior).
 |
hr {
color: red;
}
|
|
| |
hr {
color: red;
height: 1px;
}
|
|
| |
hr {
color: red;
height: 10px;
}
|
En Internet Explorer 8 la propiedad border-color establece el color del borde de la línea, pero en Internet Explorer 7 no lo hacía.
| |
hr {
border-color: red;
}
|
|
| |
hr {
border-color: red;
height: 1px;
}
|
|
| |
hr {
border-color: red;
height: 10px;
}
|
Volver al principio de la página
Cuando el destino de un enlace es una división, Internet Explorer 8 salta al principio de la división, pero Internet Explorer 7 saltaba al primer elemento que haya en ella. La diferencia se aprecia si la división tiene borde, ya que en IE8 se ve el borde superior de la división y en IE7 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 principio de la página
Internet Explorer 8 admite como destino las etiquetas <body> o <html> con atributo id.
Internet Explorer 7 no admitía como destino las etiquetas <html> con atributo id (es decir, que un enlace a ese elemento no funcionaba en Internet Explorer 7).
Internet Explorer 6 no admitía como destino las etiquetas <body> o <html> con atributo id (es decir, que un enlace a estos elementos no funcionaba en Internet Explorer 6).
Enlazar a las etiquetas <body> o <html> desde otra página no tiene mucho sentido, ya que basta con enlazar a la página, pero sí que puede ternerlo desde la misma página, para tener un enlace que lleve al principio de la página. En este caso hay que enlazar a la propia página, enlazar al primer elemento de la página (<h1>, por ejemplo) o poner en el destino del enlace el carácter almohadilla (#).
Volver al principio de la página
La lista siguiente se ve de forma distinta en Internet Explorer 8 y en Internet Explorer 7:
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. Internet Explorer 8 muestra dos marcadores a distintas alturas, mientras que Internet Explorer 7 sólo mostraba un marcador.
Volver al principio de la página
Los fondos de las listas se ven de forma distinta en Internet Explorer 8 y en Internet Explorer 7:
En este ejemplo, las etiquetas ul y li de cada una de las listas tienen colores distintos. Intenet Explorer 7 no hacía caso del color de fondo de ul.
Volver al principio de la página
Cuando una tabla ocupa varias páginas en la vista preliminar (menú en Firefox o ), Internet Explorer 8 muestra e imprime las filas de thead y tfoot en cada página de la vista preliminar, mientras que Internet Explorer 7 sólo mostraba las filas de theadal principio de la tabla y las filas de tfoot al final de la tabla.
Volver al principio de la página
Cuando una celda está vacía, Internet Explorer 7 no mostraba el borde de la celdas, Internet Explorer 8 sí que lo muestra.
| |
<table border="1">
<tbody>
<tr>
<td>Casilla 1</td>
<td></td>
</tr>
<tr>
<td></td>
<td>Casilla 4</td>
</tr>
</tbody>
</table>
|
|
Si se quería que Internet Explorer 7 mostrara el borde de una celda era necesario incluir algún espacio en blanco duro (o la entidad de carácter ) en la celda. En Amaya esos espacios se pueden insertar mediante el atajo de teclado Ctrl+espacio.
| |
<table border="1">
<tbody>
<tr>
<td>Celda 1</td>
<td></td>
</tr>
<tr>
<td></td>
<td>Celda 4</td>
</tr>
</tbody>
</table>
|
|
||||
| |
<table border="1">
<tbody>
<tr>
<td>Celda 1</td>
<td>~</td>
</tr>
<tr>
<td>~</td>
<td>Celda 4</td>
</tr>
</tbody>
</table>
|
|
El problema de incluir espacios en blanco duros para que Internet Explorer muestre el borde de las celdas es que entonces la propiedad empty-cells (que es la que especifica si debe mostrarse o no el borde de las celdas libres) no tiene efecto, ya que la celda no está vacía.
| |
table {
empty-cells: hide;
}
|
|
Volver al principio de la página
Internet Explorer 8 calcula el ancho de las celdas a partir de su contenido, pero Internet Explorer 7 tenía también en cuenta la leyenda. Si la leyenda es una cadena (sin espacios) más larga que el ancho que correspondería a la tabla por su contenido, la tabla se ensancha. Si hay espacios, entonces el ancho de la tabla se calcula en función del contenido de las celdas y la leyenda ocupa varias líneas.
| |
|
|||||
| |
|
Volver al principio de la página
Internet Explorer 7 aplicaba también el atributo cellpadding a la leyenda, mientras que Internet Explorer 8 no lo hace.
| |
<table cellpadding="10"> |
|
||||
|
|
<table cellpadding="10%"> |
|
Volver al principio de la página
Si está establecido el atributo rules, en Internet Explorer 8 las tablas se ven en modo colapsado, pero en Internet Explorer 7 se veían en modo separado.
| |
<table rules="all" border="1"> |
|
Volver al principio de la página
En Internet Explorer 8, el atributo rules no se aplica si el modo de bordes es el modo separado (border-collapse: separate), pero en Internet Explorer 7 sí que se aplicaba.
| |
HTML: <table rules="cols" border="1">
CSS: table { border-collapse: separate; }
|
|
Volver al principio de la página
Cuando no se muestra un borde de la tabla, Internet Explorer 8 muestra el borde de las celdas contiguas al borde, pero Internet Explorer 7 no lo hacía.
| |
<table border="10"> |
|
||||
| |
<table frame="void" border="10"> |
|
Volver al principio de la página
Internet Explorer 8 ya no aplica el atributo cellspacing a la leyenda cuando se aplica a la tabla, mientras que Internet Explorer 7 sí que lo hacía.
| |
<table cellspacing="10"> |
|
Volver al principio de la página
Internet Explorer 8 ya no aplica el atributo cellpadding a la leyenda cuando se aplica a la tabla, mientras que Internet Explorer 7 sí que lo hacía.
| |
<table cellpadding="10"> |
|
Volver al principio de la página
Si un botón no lleva el atributo type, Internet Explorer 8 se comporta como si fuera un botón de tipo submit, pero Internet Explorer 7 y anteriores se comportaban como si fuera un botón de tipo button.
| |
<button>Botón</button> |
Volver al principio de la página
Internet Explorer 8 aplica la propiedad letter-spacing a todas las letras (incluida la última) de una etiqueta en línea, pero Internet Explorer 7 y anteriores no lo hacían.
| |
span { letter-spacing: 10px; text-decoration: underline; } | Letras separadas y letras sin separar |
| |
span { letter-spacing: 10px; background-color: lightblue; } | Letras separadas y letras sin separar |
Nota: Si la propiedad letter-spacing se aplica a bloques, tanto Internet Explorer 8 como Internet Explorer 7 aplican la propiedad a la última letra.
Nota: Internet Explorer 8 se comporta como se ha comportado siempre Firefox. Yo pensaba que ese comportamiento era un bug de Firefox y que Internet Explorer 7 y anteriores lo hacían correctamente (de hecho hay un bug relacionado, bug 125.390, en la página de bugs de Firefox). Pero como Internet Explorer 8 lo hace ahora como Firefox, tengo que pensar que el comportamiento correcto es mostrar ese espacio final.
Volver al principio de la página
Internet Explorer 8 admite la pseudo-clase :active en elementos distintos a enlaces (<a>), pero Internet Explorer 7 y anteriores no lo hacían.
| |
p {
background-color: white;
color: black;
}
p:active {
background-color: black;
color: white;
}
|
Este párrafo está escrito en negro sobre blanco, pero cuando se hace clic en él, se muestra de color blanco sobre fondo negro. |
Volver al principio de la página
Internet Explorer 8 ya admite la pseudo-clase :focus, pero Internet Explorer 7 y anteriores no lo hacían.
En el ejemplo siguiente, al hacer clic en un campo de texto (o cambiar de campo con el tabulador), el campo seleccionado se resalta con un borde rojo.
| |
input:focus {
border: red 2px dotted;
padding: 2px;
}
|
Volver al principio de la página
Si el primer carácter no es un carácter alfanumérico, Internet Explorer 8 no aplica el pseudo-elemento hasta el primer carácter alfanumérico, mientras que Internet Explorer 7 y anteriores lo aplicaban únicamente al primer carácter:
| |
p:first-letter {
color: red;
}
|
¿Cuántas letras se ven en rojo? ¡En Firefox 1.0.X se ven varias! ¿¿Cuántas letras se ven en rojo?? ¿¿¿¿Cuántas letras se ven en rojo???? {Llaves} {{Llaves}} #Almohadilla [Corchetes] @arroba |
Volver al principio de la página
Internet Explorer 8 ya reconoce los pseudo-elementos :before y :after, pero Internet Explorer 7 y anteriores no lo hacían.
El contenido generado mediante la propiedad content puede incluir texto:
| |
p.cuidado:before {
content: "Aviso: ";
}
|
Este párrafo es un párrafo sin clase.
Este párrafo es un párrafo con clase "cuidado". Este párrafo es un párrafo sin clase. |
| |
p.autor-barto:after {
content: " (escrito por Barto).";
}
|
Este párrafo es un párrafo sin clase.
Este párrafo es un párrafo sin clase. |
| |
p.ff:before {
content: url("../img/ffO.png");
}
|
Este párrafo es un párrafo sin clase.
Este párrafo es un párrafo con clase "ff". Este párrafo es un párrafo sin clase. |
Volver al principio de la página
Internet Explorer 8 ya aplica las propiedades content, counter-reset y counter-increment, pero Internet Explorer 7 y anteriores no lo hacían.
| |
pre {
counter-reset: cuenta-parrafos;
}
|
Ejemplo de contadores Este párrafo es un párrafo sin clase. Este párrafo es un párrafo sin clase. Este párrafo es un párrafo sin clase. Ejemplo de contadores Este párrafo es un párrafo sin clase. Este párrafo es un párrafo sin clase. |
| |
pre {
counter-reset: cuenta-parrafos;
}
|
Ejemplo de contadores Este párrafo es un párrafo normal y corriente. Este párrafo es un párrafo normal y corriente. Este párrafo es un párrafo normal y corriente. Ejemplo de contadores Este párrafo es un párrafo normal y corriente. Este párrafo es un párrafo normal y corriente. |
| |
pre {
counter-reset: cuenta-parrafos;
}
|
Ejemplo de contadores Este párrafo es un párrafo normal y corriente. Este párrafo es un párrafo normal y corriente. Este párrafo es un párrafo normal y corriente. Ejemplo de contadores Este párrafo es un párrafo normal y corriente. Este párrafo es un párrafo normal y corriente. |
Volver al principio de la página
Internet Explorer 8 muestra correctamente las imágenes de fondo en <html> con margen exterior, 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 cada uno de estos navegadores:
| Internet Explorer 8 | Internet Explorer 7 | Internet Explorer 6 |
|---|---|---|
 |
 |
 |
En esa página de ejemplo, la imagen de fondo es una cuadricula de 50x50px (
) y tanto <html> como <body> tienen un margin y padding de 10px,
por lo que espacio alrededor del contenido es de 40px en total
(10px+10px+10px+10px).
En IE8 la posición inicial de la imagen de fondo es la esquina superior izquierda del elemento <html> (a 10px del borde de la ventana), pero la imagen se repite "hacia atrás" para cubrir el margen exterior. En IE7 la posición inicial de la imagen de fondo era en la esquina superior izquierda de la ventana. IE6 ni siquiera era capaz de mostrar el margen exterior o interior de <html>, como se comenta en la página de diferencias entre IE7 e IE6.
Volver al principio de la página
Internet Explorer 8 muestra correctamente el valor center en vertical de la propiedad background-position cuando se utiliza en las etiquetas <body> o <html>, pero en versiones anteriores no lo hacía. Internet Explorer 8 centra la imagen de fondo con respecto al contenido de la página (el texto, en este caso), mientras que Internet Explorer 7 la centraba con respecto a la ventana (salvo que estuviera definido en ambas etiquetas, en cuyo caso mostraba uno centrado respecto al texto y otro respecto a la ventana).
Para ver la diferencia, se puede abrir las siguiente páginas de ejemplos en ambos navegadores y comparar el resultado, u observar estas capturas:
| Fondo centrado en html | Fondo centrado en body | Fondo centrado en html y en body | |
|---|---|---|---|
|
|
 |
 |
|
 |
 |
 |
Volver al principio de la página
La recomendación CSS 2 del W3C dice que no se deben mezclar números y palabras, pero los borradores de la futura recomendación CSS 2.1 sí que permiten mezclar números y palabras, aunque obligan a que el primer término se refiera a la posición horizontal y el segundo a la vertical. Internet Explorer 8 sigue la recomendación CSS 2.1, pero Internet Explorer 7 permitía que se hiciera en cualquier orden.
En el ejemplo siguiente Internet Explorer 8 muestra la imagen de fondo arriba a la izquierda porque no hace caso de la propiedad background-position. Sin embargo Internet Explorer 7 mostraba la imagen de fondo abajo a la derecha, lo que es incorrecto puesto que la propiedad background-position del ejemplo no es válida.
| |
td {
background-image: url("verde.jpg");
|
Volver al principio de la página
Internet Explorer 8 aplica algunos valores de la propiedad list-style-type que Internet Explorer 7 no aplicaba.
| |
ul {
list-style-type: decimal-leading-zero;
}
|
|
| |
ul {
list-style-type: lower-greek;
}
|
|
| |
ul {
list-style-type: lower-latin;
}
|
|
| |
ul {
list-style-type: upper-latin;
}
|
|
| |
ul {
list-style-type: georgian;
}
|
|
| |
ul {
list-style-type: armenian;
}
|
|
Volver al principio de la página
Internet Explorer 8 aplica el valor bottom en la propiedad empty-cells, pero Internet Explorer 7 no la aplicaba.
| |
caption {
caption-side: bottom;
}
|
|
Volver al principio de la página
Internet Explorer 8 aplica la propiedad empty-cells, pero Internet Explorer 7 no la aplicaba.
| |
table { empty-cells: show; } |
|
||||
| |
table { empty-cells: hide; } |
|
Volver al principio de la página
Internet Explorer 8 aplica la propiedad border-spacing, pero Internet Explorer 7 no la aplicaba.
| |
table {
border-collapse: separate;
border-spacing: 20px;
}
|
|
||||
| |
table {
border-collapse: separate;
border-spacing: 30px 10px;
}
|
|
Volver al principio de la página
En el modo colapsado, Internet Explorer 8 aplica bordes a los elementos <table>, <tbody>, <tr> y <td>, pero Internet Explorer 7 sólo lo aplicaba a <table> y <td>.
| |
En cada columna se aplica únicamente la propiedad indicada en la celda superior | ||||||||||||||||||||||||||||||||||||
| table { border: red 5px solid; } | tbody { border: blue 5px dotted; } | tr { border: green 5px dashed; } | td { border: #CC9933 5px double; } | ||||||||||||||||||||||||||||||||||
| border- collapse |
collapse |
|
|
|
|
||||||||||||||||||||||||||||||||
Si además hay bordes de elementos distintos que se superponen, Internet Explorer 8 dibuja el de mayor grosor (o el más interior, si son del mismo grosor), pero Internet Explorer 7 no lo hacía.
| |
En cada columna se aplica la propiedad indicada en la celda superior y las anteriores. | ||||||||||||||||||||||||||||||||||
| border- collapse |
collapse | table { border: red 5px solid; } | + tbody { border: blue 5px dotted; } | + tr { border: green 5px dashed; } | + td { border: #CC9933 5px double; } | ||||||||||||||||||||||||||||||
|
|
|
|
||||||||||||||||||||||||||||||||
| table { border: red 3px solid; } | + tbody { border: blue 5px dotted; } | + tr { border: green 7px dashed; } | + td { border: #CC9933 9px double; } | ||||||||||||||||||||||||||||||||
|
|
|
|
||||||||||||||||||||||||||||||||
| table { border: red 9px solid; } | + tbody { border: blue 7px dotted; } | + tr { border: green 5px dashed; } | + td { border: #CC9933 3px double; } | ||||||||||||||||||||||||||||||||
|
|
|
|
||||||||||||||||||||||||||||||||
Volver al principio de la página
En el modo separado, Internet Explorer 8 aplica el padding del elemento <table>, pero Internet Explorer 7 no lo hacía.
| |
table {
border-collapse: separate;
margin: 15px;
padding: 15px;
}
|
|
Volver al principio de la página
En el modo colapsado, Internet Explorer 8 representa todos los bordes de la leyenda (<caption>), pero Internet Explorer 7 no representaba el borde inferior.
| |
En cada columna se aplica únicamente la propiedad indicada en la celda superior, además de caption { border: black 5px solid; } | ||||||||||||||||||||
| table { border: red 5px solid; } | tbody { border: blue 5px solid; } | tr { border: green 5px solid; } | td { border: #CC9933 5px solid; } | ||||||||||||||||||
| border- collapse |
collapse |
|
|
|
|
||||||||||||||||
| |
En cada columna se aplica la propiedad indicada en la celda superior y las anteriores, además de caption { border: black 10px solid; } | ||||||||||||||||||||
| table { border: red 5px solid; } | + tbody { border: blue 6px solid; } | + tr { border: green 7px solid; } | + td { border: #CC9933 9px solid; } | ||||||||||||||||||
| border- collapse |
collapse |
|
|
|
|
||||||||||||||||
Volver al principio de la página
En ambos modos (separado y colapsado), Internet Explorer 8 representa el margin y el padding de la leyenda (<caption>), pero Internet Explorer 7 representaba únicamente el padding de la leyenda (<caption>).
| |
En cada columna se aplica únicamente la propiedad indicada en la celda superior, además de caption { border: background-color: orange; margin: 15px; padding: 15px; } | ||||||||||||||||||||
| table { margin: 15px; padding: 15px; } | tbody { margin: 15px; padding: 15px;} | tr { margin: 15px; padding: 15px;} | td { margin: 15px; padding: 15px;} | ||||||||||||||||||
| border- collapse |
collapse |
|
|
|
|
||||||||||||||||
| separate |
|
|
|
|
|||||||||||||||||
Volver al principio de la página
Internet Explorer 8 representa los bordes de las etiquetas <col /> y <colgroup>, pero Internet Explorer 7 no lo hacía
| |
colgroup { border: 5px black solid; } | col { border: 5px red solid; } | colgroup { border: 5px black solid; } col { border: 5px red solid; } |
colgroup { border: 7px black solid; } col { border: 5px red solid; } |
||||||||||||||||||||||||
<colgroup> <col /><col /> </colgroup> ... |
|
|
|
|
Volver al principio de la página
Internet Explorer 8 posiciona correctamente una tabla posicionada con position: fixed, pero Internet Explorer 7 no lo hacía. Internet Explorer 7 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
Internet Explorer 8 posiciona correctamente elementos con width y height 100% incluidos un elemento posicionado con top y bottom, pero Internet Explorer 7 no lo hacía. Internet Explorer 7 necesitaba las propiedades top y height, como muestra la siguiente página de ejemplo de simulación de frames que se explica en la lección de ejemplos de posicionamiento absoluto.
En la página de ejemplo, la posición de la división se establece con top y height y contiene dos divisiones con width y height 100%. En IE8 se ve el contenido de una sola de las divisiones interiores, mientras que en IE7 se ve el contenido de las dos divisiones interiores.
Las capturas siguientes corresponden a la página de ejemplo anterior.
| Internet Explorer 8 | Internet Explorer 7 |
|---|---|
 |
 |
Volver al principio de la página
Internet Explorer 8 representa correctamente la propiedad compuesta outline y las propiedades outline-color, outline-width y outline-style, pero Internet Explorer 7 no lo hacía.
| |
p { outline: red 3px solid; } | Esto es un párrafo con contorno de estilo solid. |
| |
body {
background-color: black;
color:white;
}
|
Esto es un párrafo con contorno de estilo solid. |
Volver al principio de la página
Autor: Bartolomé Sintes Marco