# Diferencias entre Firefox e Internet Explorer 7

A menudo, una misma página se ve de una forma distinta en Firefox o en Internet Explorer 7. En esta página se comentan algunas de estas situaciones.

## Utilización del navegador

### Tamaño del texto

Firefox permite elegir aumentar o reducir el tamaño de texto tanto como se quiera (mediante el menú Ver > Tamaño de texto, con las combinaciones de teclas `Ctrl++` y `Ctrl+-` o con la combinación `Ctrl+rueda del ratón`) mientras que Internet Explorer sólo permite elegir entre 5 tamaños de texto (Muy grande, Grande, Mediano, Pequeño, Muy pequeño), mediante el menú Ver > Tamaño de texto.

Internet Explorer 7 permite ampliar o reducir una página mediante las combinaciones de teclas `Ctrl++` y `Ctrl+-` o con la combinación `Ctrl+rueda del ratón`, 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, como en el caso de Firefox.

La combinación `Ctrl+rueda del ratón` funciona en Internet Explorer al revés que en Firefox, es decir, que en Firefox cuando la rueda se desplaza hacia atrás (hacia el usuario) el tipo de letra aumenta, mientras que en Internet Explorer todo se ve más pequeño.

Volver al índice

### Nuevas pestañas

Cuando se abre un enlace en una nueva pestaña (`Ctrl+botón central del ratón`), Firefox abre la nueva pestaña al final, mientras que Internet Explorer la abre 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, Firefox crea la nueva pestaña en la cuarta posición, mientras que Internet Explorer abre la nueva pestaña en la segunda posición, desplazando las dos pestañas restantes.

Volver al índice

## HTML

### Etiquetas HTML

#### La etiqueta <q>

En la recomendación HTML 4.0 (aprobada en abril de 1998) establece claramente en su apartado 9.2.2 Citas, que "los agente visuales de usuario deben asegurar que el contenido del elemento Q se muestra con comillas".

Firefox sigue la recomendación, pero Internet Explorer no lo hace. ¿Qué ocurre entonces? Que como la mayoría de personas que escriben páginas web desconocen las recomendaciones (lo que no dice mucho en su favor) y no prueban el resultado de sus diseños más que en Internet Explorer (lo que todavía dice menos en su favor), si utilizan la etiqueta <q> normalmente añaden a mano las comillas. El resultado es que los navegadores que sí que siguen las recomendaciones muestran dobles comillas (las que ha escrito el autor y las que deben ponerse alrededor de una etiqueta <q>).

La tabla siguiente muestra en la primera fila el código fuente correcto (una cita con las etiquetas <q> sin comillas) y en la segunda el código fuente incorrecto (una cita con etiquetas <q> y además, comillas). En Firefox se ve la primera fila con comillas y la segunda con dobles comillas. En Internet Explorer se ve la primera fila sin comillas y la segunda con comillas.

| <q>The best is yet to be</q> | The best is yet to be
| "<q>The best is yet to be</q>" | "The best is yet to be"

Volver al índice

#### La etiqueta <abbr>

Cuando la etiqueta <abbr> tiene el atributo title, Firefox muestra un subrayado fino. Internet Explorer no.

| ... como <abbr title="Gnu is Not Unix" >GNU</abbr>, ... | Utilizar abreviaturas recursivas, como GNU, es una costumbre bastante extendida entre los hackers.

Volver al índice

### Entidades de carácter

Firefox muestra más entidades de carácter que Internet Explorer. La siguiente tabla muestra las entidades de carácter que no muestra Internet Explorer

Símbolo | Nombre | Código decimal | Código hexadecimal | 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 índice

### Imágenes

Si una imagen no tiene atributo title, Internet Explorer muestra el atributo alt en forma de "tip" (cuadrito amarillo que aparece cuando se sitúa el ratón encima de la imagen). Firefox no lo hace. Solamente muestra un tip cuando la imagen tiene establecido el atributo title.

| <img alt="Este es el atributo alt de una imagen que sólo tiene atributo alt" src="tux.jpg" /> |

Volver al índice

### Enlaces

#### Enlaces a <html>

Cuando el destino de un enlace es el elemento <html>, Internet Explorer no salta al principio de la página. Firefox 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

### Listas

#### Lista dentro de lista

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

- - 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. Firefox muestra dos marcadores a la misma altura. Internet Explorer sólo muestra el marcador de la lista interior.

Volver al índice

#### Fondos de listas

Los fondos de las litas se ven de forma distinta en Firefox y en Internet Explorer:

- Punto 1
  - Subpunto 1

En este ejemplo, las etiquetas <ul> y <li> de cada una de las listas tienen colores distintos. Intenet Explorer no hace caso del color de fondo de <ul>.

Volver al índice

### Tablas

#### Ancho de celdas

Firefox calcula el ancho de las celdas a partir de su contenido, pero Internet Explorer tiene 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, como hace siempre Firefox.

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

#### El atributo cellpadding

Internet Explorer aplica también el atributo cellpadding a la leyenda, mientras que Firefox no.

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

#### Borde de celdas vacías

Cuando una celda está vacía, Internet Explorer no muestra el borde de la celdas. Firefox 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

#### Impresión de <thead> y <tfoot>

Cuando una tabla ocupa varias páginas en la vista preliminar (menú Archivo > Vista preliminar), Firefox muestra e imprime las filas de <thead> y <tfoot> en cada página de la vista preliminar, mientras que Internet Explorer 7 sólo muestra las filas de <thead>al principio de la tabla y las filas de <tfoot> al final de la tabla.

Volver al índice

### Posicionamiento

#### Posicionamiento fijo

Internet Explorer no aplica correctamente el posicionamiento fijo (position: fixed) a una tabla. Coloca la leyenda (<caption>) en el lugar correcto, pero no las celdas de la tabla. Firefox lo hace bien. Si la tabla está metida en una división y el posicionamiento lo tiene la división, Internet Explorer ya lo hace bien.

Volver al índice

### Formularios

#### Botón <button> sin atributo type

Si en un botón no lleva el atributo type, Firefox se comporta como si fuera un botón de tipo reset, pero Internet Explorer se comporta como si fuera un botón de tipo button.

|  | <button>Botón</button> |

Volver al índice

## CSS

### Pseudo-clases

La pseudo-clase :firstletter en Mozilla se aplica también a la segunda letra si es, por ejemplo, "?".

Volver al índice

### Texto

Si un párrafo tiene suprarayado y alguna palabra de ese párrafo está aumentada, Firefox matiene la línea de suprayado a la misma altura a lo largo de todo el párrafo, mientras que Internet Explorer desplaza la línea a la altura de la palabra.

| <p style="text-decoration: overline;">Este es un párrafo <span style="font-size: 200%">suprarayado</span>.</p> | Este es un párrafo suprayado.

Volver al índice

### Bordes

Si un elemento tiene un borde a trazos, la zona sin trazo se ve del color de fondo del elemento (en Firefox) o del elemento padre (Internet Explorer).

| p { background-color: lightblue; border: red 10px dashed; } | Esto es un párrafo con borde de estilo solid.

Volver al índice

### Contornos

Internet Explorer no muestra la propiedad outline.

| p { outline: red 3px solid; } | Esto es un párrafo con contorno de estilo solid.

Volver al índice

### Tablas

#### La propiedad empty-cells

Internet Explorer no aplica la propiedad empty-cells. Firefox sí que la aplica.

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

## MathML

Firefox es capaz de mostrar elementos MathML sin necesidad de plug-ins, aunque es necesario instalar fuentes adecuadas. Internet Explorer requiere un plug-in para mostrar elementos MathML.

Firefox es capaz de mostrar archivos locales con elementos MathML. Internet Explorer no. El motivo es es que Internet Explorer carga cualquier documento con el tipo MIME text/html, mientras que Firefox carga los documentos que tienen la extensión .xhtml con el tipo MIME application/xhtml+xml.

Volver al índice

## Microsoft y el W3C

Aviso: lo que sigue es opinión personal.

Creo que hay motivos para criticar duramente la postura de Microsoft respecto a las recomendaciones del W3C.

Microsoft ha formado parte del W3C desde sus inicios y ha participado en todos los grupos de trabajo, por lo que supongo que todas las recomendaciones se han aprobado con su visto bueno (salvo seguramente las relacionadas con las patentes). En los primeros años del W3C, cuando el navegador más utilizado era Netscape, Microsoft sí que procuró que Internet Explorer siguiera las recomendaciones del W3C. Pero a partir de 1999, una vez que Internet Explorer se convirtió en el navegador más utilizado, Microsoft perdió el interés en seguir mejorando el navegador (y las tácticas que utilizó Microsoft para conseguir ese dominio no fueron ciertamente limpias).

Desde 1999, Microsoft ha jugado con la ventaja de que todos los diseñadores de páginas web han tenido que asegurarse de que las páginas funcionen correctamente en Internet Explorer, así que las características que Internet Explorer no entiende, simplemente no las ha utilizado nadie.

Pero quizás el mayor boicoteo que Microsoft realiza al W3C es cuando Internet Explorer sí que entiende una propiedad, pero de manera distinta a lo que indica la recomendación. Porque entonces la mayoría de diseñadores de páginas web utilizan esas propiedades de manera que queden bien en Internet Explorer, pero haciendo que queden mal en los navegadores que sí que siguen las recomendaciones del W3C. Un ejemplo, sin demasiada importancia pero representativo del problema, es la etiqueta <q>, que se comenta en esta página.

Solamente cuando Firefox empezó en 2005 a amenazar el predominio absoluto de Internet Explorer, Microsoft ha publicado una nueva versión de Internet Explorer, IE7, que mejora el soporte de las recomendaciones.

Paradójicamente, quizás el principal motivo para usar Firefox es contribuir así a que Microsoft se vea obligado a colaborar con el W3C.

Volver al índice