# Diferencias entre Internet Explorer 8 e Internet Explorer 7

Internet Explorer 8 aportó 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). Microsoft mantiene una web con información sobre las novedades de Internet Explorer 8.

En esta página se comentan algunas de esas diferencias.

Nota: Esta página no pretende ser una relación exhaustiva de diferencias entre IE8 e IE7, sino simplemente recopilar las diferencias que he ido encontrando al redactar estos apuntes.

## Utilización del navegador

### Zoom

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

### Nuevas pestañas

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

### Hojas de estilo alternativas y desactivar hoja de estilo

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

### Barra de desplamiento vertical

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

## HTML

### Entidades de carácter

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.

Otros símbolos
Símbolo | Nombre | Código | Código | Descripción
--- | --- | --- | --- | ---
℘ | &weierp; | &#8472; | &#x2118; | función elíptica de Weierstrass
ℑ | &image; | &#8465; | &#x2111; | parte imaginaria
ℜ | &real; | &#8476; | &#x211C; | parte real
ℵ | &alefsym; | &#8501; | &#x2135; | primer cardinal transfinito (numerable)
↵ | &crarr; | &#8629; | &#x21b5; | retorno de carro
⇐ | &lArr; | &#8656; | &#x21d0; | flecha doble hacia la izquierda
⇑ | &uArr; | &#8657; | &#x21d1; | flecha doble hacia arriba
⇒ | &rArr; | &#8658; | &#x21d2; | flecha doble hacia la derecha
⇓ | &dArr; | &#8659; | &#x21d3; | flecha doble hacia abajo
⇔ | &hArr; | &#8660; | &#x21d4; | flecha doble derecha izquierda
∀ | &forall; | &#8704; | &#x2200; | para todo
∃ | &exist; | &#8707; | &#x2203; | existe
∅ | &empty; | &#8709; | &#x2205; | conjunto vacío
∇ | &nabla; | &#8711; | &#x2207; | operador nabla
∈ | &isin; | &#8712; | &#x2208; | pertenece a
∉ | &notin; | &#8713; | &#x2209; | no pertenece a
∋ | &ni; | &#8715; | &#x220b; | contiene a
∗ | &lowast; | &#8727; | &#x2217; | operador asterisco
∝ | &prop; | &#8733; | &#x221d; | proporcional a
∠ | &ang; | &#8736; | &#x2220; | ángulo
∧ | &and; | &#8743; | &#x2227; | operador lógico y
∨ | &or; | &#8744; | &#x2228; | operador lógico o
∪ | &cup; | &#8746; | &#x222a; | unión
∴ | &there4; | &#8756; | &#x2234; | por lo tanto
∼ | &sim; | &#8764; | &#x223c; | operador tilde
≅ | &cong; | &#8773; | &#x2245; | aproximadamente igual a
⊂ | &sub; | &#8834; | &#x2282; | subconjunto de
⊃ | &sup; | &#8835; | &#x2283; | superconjunto de
⊄ | &nsub; | &#8836; | &#x2284; | no subconjunto de
⊆ | &sube; | &#8838; | &#x2286; | subconjunto de o igual a
⊇ | &supe; | &#8839; | &#x2287; | superconjunto de o igual a
⊕ | &oplus; | &#8853; | &#x2295; | signo más rodeado por un círculo
⊗ | &otimes; | &#8855; | &#x2297; | signo por rodeado por un círculo
⊥ | &perp; | &#8869; | &#x22a5; | perpendicular
⋅ | &sdot; | &#8901; | &#x22c5; | operador punto
⟨ | &lang; | &#9001; | &#x2329; | corchete angular izquierdo
⟩ | &rang; | &#9002; | &#x232a; | corchete angular derecho

Volver al principio de la página

### Etiqueta <q>

<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, The best is yet to be.
    <p>Como escribió Robert Browning, "<q>The best
    is yet to be</q>".</p>
| Como escribió Robert Browning, "The best is yet to be".

Volver al principio de la página

### Atributo alt de img

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

### Líneas horizontales

#### Color: color y background-color

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

### Enlaces

#### Enlaces a divisiones

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

#### Enlaces a <body> o <html>

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 (#).

La siguiente página de ejemplo permite probar el funcionamiento de los navegadores.

Volver al principio de la página

### Listas

#### Lista dentro de lista

La lista siguiente se ve de forma distinta en Internet Explorer 8 y en Internet Explorer 7:

- - Elemento de lista

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

#### Fondos de listas

Los fondos de las listas se ven de forma distinta en Internet Explorer 8 y en Internet Explorer 7:

- Punto 1
  - Subpunto 1

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

### Tablas

#### Impresión de thead y tfoot

Cuando una tabla ocupa varias páginas en la vista preliminar (menú Archivo > Vista preliminar en Firefox o Archivo > Vista previa de impresión), 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 thead al principio de la tabla y las filas de tfoot al final de la tabla.

Volver al principio de la página

#### Borde de celdas vacías

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>
Casilla 1 |
| Casilla 4

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 &nbsp;) 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>
Celda 1 |
| Celda 4
    <table border="1">
      <tbody>
        <tr>
          <td>Celda 1</td>
          <td>~</td>
        </tr>
        <tr>
          <td>~</td>
          <td>Celda 4</td>
        </tr>
      </tbody>
    </table>
Celda 1 |
| Celda 4

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;
    }
La celda de la derecha no está vacía, tiene un espacio duro |
| La celda de la izquierda sí que está vacía

Volver al principio de la página

#### Ancho de celdas

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.

La_leyenda_es_una_cadena_muy_larga
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
La leyenda es una cadena muy larga
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4

Volver al principio de la página

#### El atributo cellpadding

Internet Explorer 7 aplicaba también el atributo cellpadding a la leyenda, mientras que Internet Explorer 8 no lo hace.

| <table cellpadding="10"> |
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
| <table cellpadding="10%"> |
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4

Volver al principio de la página

#### El atributo rules

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">
Esto es la leyenda
Celda 1 | Celda 2
Celda 3 | Celda 4
Esto es la leyenda
Celda 1 | Celda 2
Celda 3 | Celda 4

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; }
Esto es la leyenda
Celda 1 | Celda 2
Celda 3 | Celda 4
Esto es la leyenda
Celda 1 | Celda 2
Celda 3 | Celda 4

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">
Esto es la leyenda
Celda 1 | Celda 2
Celda 3 | Celda 4
    <table frame="void" border="10">
Esto es la leyenda
Celda 1 | Celda 2
Celda 3 | Celda 4

Volver al principio de la página

#### El atributo cellspacing

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">
Esto es la leyenda
Celda 1 | Celda 2
Celda 3 | Celda 4

Volver al principio de la página

#### El atributo cellpadding

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">
Esto es la leyenda
Celda 1 | Celda 2
Celda 3 | Celda 4

Volver al principio de la página

### Formularios

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

## CSS

### Texto

#### Grosor del trazo: font-weight

Al dar valores numéricos a la propiedad font-weight, Internet Explorer 8 sólo muestra dos grosores distintos mientras que Internet Explorer 7 mostraba tres grosores distintos. La diferencia está en el valor 600, que se ve distinto al resto.

- 100, 200, 300, 400, 500, 600, 700, 800, 900
- normal y bold
- lighter y bolder

    p.g600 {
      font-weight: 600;
    }

    p.g700 {
      font-weight: 700;
    }
| Este párrafo está en negrita (600) Este párrafo está en negrita (700)

Volver al principio de la página

#### Propiedad letter-spacing a elementos en-línea

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

### Pseudo-clases y pseudo-elementos

#### Pseudo-clase :active

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

#### Pseudo-clase :focus

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

#### Pseudo-elemento :first-letter

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

### Los pseudo-elementos :before y :after

#### Contenido generado: content

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 con clase "autor-barto". 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

#### Generar contadores: content, counter-increment y counter-reset

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

    p:before {
      content: counter(cuenta-parrafos);
      counter-increment: 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;
    }

    p:before {
      content: counter(cuenta-parrafos)". ";
      counter-increment: 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;
    }

    p:before {
      content: counter(cuenta-parrafos, upper-roman)". ";
      counter-increment: 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

### Fondos

#### Imágenes de fondo en <html> con margen exterior

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

#### Centrado vertical de imágenes de fondo background-position en <body> o <html>

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

#### Mezclar números y palabras en background-position

La recomendación CSS 2 del W3C dice que no se deben mezclar números y palabras, pero la 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");
      background-position: bottom 100%;
      /* bottom 100% es incorrecto, lo correcto
         sería decir 100% bottom (primero la posición
         horizontal y luego la vertical)
      */
      background-repeat: no-repeat;
    }

Volver al principio de la página

#### Tipo predefinidos de marcador: list-style-type

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;
    }
| Esto es un punto de una lista Esto es otro punto de la misma lista
    ul {
      list-style-type: lower-greek;
    }
| Esto es un punto de una lista Esto es otro punto de la misma lista
    ul {
      list-style-type: lower-latin;
    }
| Esto es un punto de una lista Esto es otro punto de la misma lista
    ul {
      list-style-type: upper-latin;
    }
| Esto es un punto de una lista Esto es otro punto de la misma lista
    ul {
      list-style-type: georgian;
    }
| Esto es un punto de una lista Esto es otro punto de la misma lista
    ul {
      list-style-type: armenian;
    }
| Esto es un punto de una lista Esto es otro punto de la misma lista

Volver al principio de la página

### Tablas

#### La propiedad caption-side

Internet Explorer 8 aplica el valor bottom en la propiedad empty-cells, pero Internet Explorer 7 no la aplicaba.

    caption {
      caption-side: bottom;
    }
Esto es la leyenda
Celda 1 | Celda 2
Celda 3 | Celda 4

Volver al principio de la página

#### La propiedad empty-cells

Internet Explorer 8 aplica la propiedad empty-cells, pero Internet Explorer 7 no la aplicaba.

| table { empty-cells: show; } |
Esto es la leyenda
Casilla 1 |
| Casilla 4
| table { empty-cells: hide; } |
Esto es la leyenda
Casilla 1 |
| Casilla 4

Volver al principio de la página

#### La propiedad border-spacing

Internet Explorer 8 aplica la propiedad border-spacing, pero Internet Explorer 7 no la aplicaba.

    table {
      border-collapse: separate;
      border-spacing: 20px;
    }
Esto es la leyenda
Celda 1 | Celda 2
Celda 3 | Celda 4
    table {
      border-collapse: separate;
      border-spacing: 30px 10px;
    }
Esto es la leyenda
Celda 1 | Celda 2
Celda 3 | Celda 4

Volver al principio de la página

#### Bordes de los elementos <table>, <tbody>, <tr> y <td> en modo colapsado

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 |
Leyenda
Celda 1 | Celda 2
Celda 3 | Celda 4
Celda 1 | Celda 2
Celda 3 | Celda 4
Leyenda
Celda 1 | Celda 2
Celda 3 | Celda 4
Celda 1 | Celda 2
Celda 3 | Celda 4
Leyenda
Celda 1 | Celda 2
Celda 3 | Celda 4
Celda 1 | Celda 2
Celda 3 | Celda 4
Leyenda
Celda 1 | Celda 2
Celda 3 | Celda 4
Celda 1 | Celda 2
Celda 3 | Celda 4

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; }
Leyenda
Celda 1 | Celda 2
Celda 3 | Celda 4
Celda 1 | Celda 2
Celda 3 | Celda 4
Leyenda
Celda 1 | Celda 2
Celda 3 | Celda 4
Celda 1 | Celda 2
Celda 3 | Celda 4
Leyenda
Celda 1 | Celda 2
Celda 3 | Celda 4
Celda 1 | Celda 2
Celda 3 | Celda 4
Leyenda
Celda 1 | Celda 2
Celda 3 | Celda 4
Celda 1 | Celda 2
Celda 3 | Celda 4
table { border: red 3px solid; } | + tbody { border: blue 5px dotted; } | + tr { border: green 7px dashed; } | + td { border: #CC9933 9px double; }
Leyenda
Celda 1 | Celda 2
Celda 3 | Celda 4
Celda 1 | Celda 2
Celda 3 | Celda 4
Leyenda
Celda 1 | Celda 2
Celda 3 | Celda 4
Celda 1 | Celda 2
Celda 3 | Celda 4
Leyenda
Celda 1 | Celda 2
Celda 3 | Celda 4
Celda 1 | Celda 2
Celda 3 | Celda 4
Leyenda
Celda 1 | Celda 2
Celda 3 | Celda 4
Celda 1 | Celda 2
Celda 3 | Celda 4
table { border: red 9px solid; } | + tbody { border: blue 7px dotted; } | + tr { border: green 5px dashed; } | + td { border: #CC9933 3px double; }
Leyenda
Celda 1 | Celda 2
Celda 3 | Celda 4
Celda 1 | Celda 2
Celda 3 | Celda 4
Leyenda
Celda 1 | Celda 2
Celda 3 | Celda 4
Celda 1 | Celda 2
Celda 3 | Celda 4
Leyenda
Celda 1 | Celda 2
Celda 3 | Celda 4
Celda 1 | Celda 2
Celda 3 | Celda 4
Leyenda
Celda 1 | Celda 2
Celda 3 | Celda 4
Celda 1 | Celda 2
Celda 3 | Celda 4

Volver al principio de la página

#### Margen interior (padding) de tablas (<table>) en modo separado

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;
    }
Leyenda
Celda 1 | Celda 2
Celda 3 | Celda 4
Celda 1 | Celda 2
Celda 3 | Celda 4

Volver al principio de la página

#### Borde de la leyenda (<caption>) en modo colapsado

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 |
Leyenda
Celda 1 | Celda 2
Celda 3 | Celda 4
Leyenda
Celda 1 | Celda 2
Celda 3 | Celda 4
Leyenda
Celda 1 | Celda 2
Celda 3 | Celda 4
Leyenda
Celda 1 | Celda 2
Celda 3 | Celda 4

| 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 |
Leyenda
Celda 1 | Celda 2
Celda 3 | Celda 4
Leyenda
Celda 1 | Celda 2
Celda 3 | Celda 4
Leyenda
Celda 1 | Celda 2
Celda 3 | Celda 4
Leyenda
Celda 1 | Celda 2
Celda 3 | Celda 4

Volver al principio de la página

#### Márgenes de la leyenda (<caption>)

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 |
Leyenda
Celda 1 | Celda 2
Celda 3 | Celda 4
Leyenda
Celda 1 | Celda 2
Celda 3 | Celda 4
Leyenda
Celda 1 | Celda 2
Celda 3 | Celda 4
Leyenda
Celda 1 | Celda 2
Celda 3 | Celda 4
separate |
Leyenda
Celda 1 | Celda 2
Celda 3 | Celda 4
Leyenda
Celda 1 | Celda 2
Celda 3 | Celda 4
Leyenda
Celda 1 | Celda 2
Celda 3 | Celda 4
Leyenda
Celda 1 | Celda 2
Celda 3 | Celda 4

Volver al principio de la página

#### Bordes de los elementos <col /> y <colgroup>

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>
     ...
Esto es la leyenda
Celda 1 | Celda 2 | Celda 3
Celda 4 | Celda 5 | Celda 6
Esto es la leyenda
Celda 1 | Celda 2 | Celda 3
Celda 4 | Celda 5 | Celda 6
Esto es la leyenda
Celda 1 | Celda 2 | Celda 3
Celda 4 | Celda 5 | Celda 6
Esto es la leyenda
Celda 1 | Celda 2 | Celda 3
Celda 4 | Celda 5 | Celda 6

Volver al principio de la página

### Posicionamiento

#### Posicionamiento fijo de una tabla

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

#### Posicionamiento de elementos con width y height 100% incluidos en elementos posicionados con top y bottom

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

### Contornos

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;
    }
    p {
      outline: invert 3px solid;
    }
| Esto es un párrafo con contorno de estilo solid.

Volver al principio de la página

Esta obra está bajo una licencia de Creative Commons Reconocimiento-CompartirIgual 3.0 España.