Diferencias entre
Firefox e Internet Explorer 7Diferencias entre
Firefox e Internet Explorer 7A 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.
Nota: Faltan por poner bastantes diferencias y añadir capturas en algunos de ellos.
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.
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.
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 la etiqueta q sin comillas) y en la segunda el código fuente incorrecto (una cita con la etiqueta 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" |
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. |
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 |
|---|---|---|---|---|
| ℘ | ℘ | ℘ | ℘ | 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 |
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" /> |  |
Cuando el destino de un enlace es una división, Firefox salta al principio de la división, pero Internet Explorer salta al primer elemento que haya en ella. La diferencia se aprecia si la división tiene borde, ya que en Firefox se ve el borde superior de la división y en IE 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 html (para ello tiene que tener atributo id), 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.
La lista siguiente se ve de forma distinta en Firefox y en Internet Explorer:
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.
Los fondos de las listas se ven de forma distinta en Firefox y en Internet Explorer:
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.
Cuando una tabla ocupa varias páginas en la vista preliminar (menú ), 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 theadal principio de la tabla y las filas de tfoot al final de la tabla.
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>
|
|
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.
 |
|
|||||
| |
|
Cuando no se muestra un borde de la tabla, Internet Explorer no muestra el borde de las celdas contiguas al borde, pero Firefox sí.
| |
<table frame="hsides" border="10"> |
|
||||
| |
<table frame="vsides" border="10"> |
|
En Firefox, cuando el modo de bordes no está establecido las tablas se ven en modo de bordes separado, pero si está el atributo rules las tablas se ven en modo colapsado. Pero en Internet Explorer, aunque esté el atributo rules las tablas se ven en modo separado.
Nota: En este caso no sé cuál de los dos no hace las cosas correctamente, porque aunque Firefox suele seguir mejor las normas, Firefox tiene bugs relacionados con los modos de bordes de las tablas.
En Firefox, el atributo rules no se aplica si el modo de bordes es el modo separado (border-collapse: separate), pero en Internet Explorer sí.
| |
HTML: <table rules="cols" border="1">
CSS: table { border-collapse: separate; }
|
|
Nota: En este caso no sé cuál de los dos no hace las cosas correctamente, porque aunque Firefox suele seguir mejor las normas, Firefox tiene bugs relacionados con los modos de bordes de las tablas.
Internet Explorer aplica también el atributo cellpadding a la leyenda, mientras que Firefox no.
| |
<table cellpadding="10"> |
|
||||
|
|
<table cellpadding="10%"> |
|
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.
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> |
Si hay varios elementos con la misma tecla de acceso, o si hay varios elementos con la misma tecla de acceso en mayúsculas y minúsculas, Firefox e Internet Explorer avanzan de uno a otro (FF con Alt+Shift+tecla, IE con Alt+tecla). Internet Explorer además retrocede de uno a otro con Alt+Shift+tecla, mientras que Firefox no.
| |
<input type="text" value="Acceso con z"
accesskey="z" /> <input type="text" value="Acceso con z" accesskey="z" /> <input type="text" value="Acceso con z" accesskey="z" /> |
|
| |
<input type="text" value="Acceso con w"
accesskey="w" /> <input type="text" value="Acceso con W" accesskey="W" /> |
Si el primer carácter no es un carácter alfanumérico, Firefox aplica el pseudo-elemento :first-letter hasta el primer carácter alfanumérico, mientras que Internet Explorer lo aplica ú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 |
Nota: En versiones anteriores a Firefox 3, Firefox aplicaba el pseudo-elemento únicamente a los dos primeros caracteres si el primero no era alfanumérico (ver bug 328.111 en la página de bugs de Firefox).
Internet Explorer sólo admite la seudo-clase :active aplicada a enlaces, mientras que Firefox la reconoce en cualquier elemento. En los ejemplos siguientes, al hacer clic (y mantener pulsado el botón del ratón) en el enlace del primer ejemplo o en el párrafo del segundo ejemplo, el elemento cambia de color en Firefox, pero en Internet Explorer sólo cambia el enlace.
| |
p { color: black; background-color: white; } a:active { color: white; background-color: black; } |
Este párrafo está escrito en negro sobre blanco, pero cuando se hace clic en este enlace, el enlace se muestra de color blanco sobre fondo negro. |
|
p { color: black; background-color: white; } p:active { color: white; background-color: black; } |
Este párrafo está escrito en negro sobre blanco, pero cuando se hace clic en él, se muestra de color blanco sobre fondo negro. |
La pseudo-clase :focus funciona en Firefox, pero no en Internet Explorer. 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 en Firefox, pero no cambia en Internet Explorer.
| |
input:focus { border: red 2px dotted; padding: 2px; } |
La propiedad font-size-adjust funciona en Firefox, pero no en Internet Explorer. Lo que hace Firefox es multiplicar el valor de font-size por el de font-size-adjust y dar a la letra minúscula x ese tamaño.
| |
p {
font-size: 16px;
font-size-adjust: 1.5;
}
|
Esta letra x tiene 16 x 1.5 = 24 px de altura. |
| |
p {
font-size: 16px;
font-size-adjust: 0.5;
}
|
Esta letra x tiene 16 x 0.5 = 8 px de altura. |
Si un párrafo tiene suprarayado y alguna palabra de ese párrafo está aumentada, Firefox mantiene 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. |
Firefox aplica la propiedad letter-spacing a todas las letras (incluida la última) de una etiqueta en línea, lo que puede causar efectos no deseados. Ver bug 125.390 en la página de bugs de Firefox. Internet Explorer no añade ese espacio en blanco a la última letra.
 |
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 Firefox como Internet Explorer aplican la propiedad a la última letra.
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. |
Las diferencias en la manera de tratar las líneas de Firefox y de Internet Explorer se comentan con detalle en la lección sobre líneas horizontales:
Si una página tiene imagen de fondo y margen en la etiqueta html, Firefox e Internet Explorer no muestran la imagen de la misma manera. Internet Explorer coloca la imagen en el borde izquierdo superior de la ventana, mientras que Firefox la coloca desplazada (de acuerdo con el margen especificado, aunque rellena el hueco del margen con la propia imagen).
Para ver la diferencia, se puede abrir la siguiente página de ejemplo de fondo y margen en ambos navegadores y comparar el resultado, u observar estas capturas.
| Firefox | Internet Explorer 7 |
 |
 |
Internet Explorer no muestra la propiedad outline.
| |
p { outline: red 3px solid; } | Esto es un párrafo con contorno de estilo solid. |
Internet Explorer no aplica la propiedad empty-cells. Firefox sí que la aplica.
| |
table { empty-cells: show; } |
|
||||
| |
table { empty-cells: hide; } |
|
Internet Explorer solamente admite valores URI en la propiedad cursor si el el formato del archivo de cursor es el propio de Windows (*.cur).
| |
p { cursor: url("../img/exclamacion.png"), auto; } | Al situar el cursor del ratón sobre este párrafo, la forma del cursor debe cambiar a un signo de exclamación en color rojo. |
| |
p { cursor: url("../img/bug_38477.cur"), auto; } | Al situar el cursor del ratón sobre este párrafo, la forma del cursor debe cambiar a un signo de exclamación en color rojo. |
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.
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.
Autor: Bartolomé Sintes Marco