Diferencias entre Firefox e Internet Explorer
9Diferencias entre Firefox e Internet Explorer
9En esta página se comentan algunas de las diferencias entre Firefox e Internet Explorer 9.
Nota: Algunas de las diferencias incluidas en esta página son diferencias entre Firefox e Internet Explorer 7 y están pendientes de confirmar en Internet Explorer 8 y 9.
Internet Explorer 9 dispone de dos tipos de zoom:
Firefox dispone de los dos tipos de zoom:
En Firefox los dos tipos de zoom funcionan mediante el menú , con las combinaciones de teclas Ctrl++ y Ctrl+- o con la combinación Ctrl+rueda del ratón. Una opción del menú permite elegir el tipo de zoom a aplicar.
Volver al principio de la página
La lista siguiente se ve de forma distinta en Firefox y en Internet Explorer 9:
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 9 los muestra a diferentes alturas.
Volver al principio de la página
Cuando no se muestra un borde de la tabla, Internet Explorer 8 no muestra el borde de las celdas contiguas al borde, pero Firefox sí.
  |
<table frame="hsides" border="10"> |
|
||||
| |
<table frame="vsides" border="10"> |
|
Nota: No comprobado en Internet Explorer 8.
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.
Nota: No comprobado en Internet Explorer 8.
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.
Volver al principio de la página
Nota: No comprobado en Internet Explorer 8.
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 principio de la página
Nota: No comprobado en Internet Explorer 8.
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 principio de la página
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 8 avanzan de uno en uno (FF con Alt+Shift+tecla, IE8 con Alt+tecla). Internet Explorer 8 usa Alt+Shift+tecla para retroceder de uno en uno.
| |
<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" /> |
Volver al principio de la página
Internet Explorer no admite la forma de enlazar los favicons recomendada por el W3C, mientras que Firefox sí lo hace. Además, Internet Explorer tampoco muestra los favicons si las páginas no están colgadas en un servidor.
La tabla siguiente contiene enlaces a diferentes páginas que contiene enlaces a favicons definidos de maneras distintas. Abriendo los enlaces en el navegador puede comprobarse si el navegador es capaz de mostrar los favicons.
| Sintaxis del enlace | Tamaño de imagen (píxeles) | |||
|---|---|---|---|---|
| 16x16 | 32x32 | 32x32+16x16 | ||
| |
<link rel="shortcut icon" href="cdlibre.ico"/> |  |
 |
|
 |
<link rel="icon" type="image/png" href="cdlibre.png" /> | |
|
|
| |
<link rel="icon" type="image/vnd.microsoft.icon" href="cdlibre.ico"/> | |
|
|
Volver al principio de la página
Los navegadores "recuerdan" los enlaces visitados, pero no de la misma manera. Internet Explorer 8 los recuerda mientras no se recargue la página, mientras que Firefox los recuerda hasta que se borra el historial en el navegador.
En Firefox, el contenido generado no puede seleccionarse con el ratón, pero en Internet Explorer 8 sí.
| |
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. |
Volver al principio de la página
Aunque los contadores funcionan en Internet Explorer 8, este ejemplo con dos contadores no funciona en Internet Explorer 8:
| |
h2 {
counter-reset: cuenta-parrafos;
counter-reset: cuenta-apartados;
}
|
Ejemplo de contadoresApartado 1Este 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. Apartado 2Este 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
La propiedad font-size-adjust funciona en Firefox, pero no en Internet Explorer 8. 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. |
Volver al principio de la página
La propiedad text-decoration: blink funciona en Firefox, pero no en Internet Explorer 8.
|
p {
text-decoration: blink;
}
|
Esto es un párrafo p normal y corriente. |
Volver al principio de la página
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 8 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 principio de la página
La propiedad text-shadow funciona en Firefox, pero no en Internet Explorer 8.
| |
p {
text-shadow: grey 1px -1px
}
|
Esto es un párrafo con sombreado. |
| |
p {
text-shadow: grey 5px -5px 2px;
}
|
Esto es un párrafo con sombreado desenfocado. |
Volver al principio de la página
En Firefox la propiedad color establece el color del borde de la línea, pero en Internet Explorer 8 no.
| |
hr {
color: red;
}
|
|
| |
hr {
color: red;
height: 1px;
}
|
|
| |
hr {
color: red;
height: 10px;
}
|
Si se usa la propiedad width junto con margin-left y margin-right, Internet Explorer 8 no la interpreta como Firefox:
En el ejemplo siguiente, la línea se sitúa a la izquierda del todo en Firefox, pero en el centro en Internet Explorer 8:
| |
hr {
background-color: red;
height: 10px;
margin-left: 0%;
width: 50%;
}
|
En el ejemplo siguiente, la línea se sitúa a la derecha del todo en Firefox, pero en el centro en Internet Explorer 8:
| |
hr {
background-color: red;
height: 10px;
margin-right: 0%;
width: 50%;
}
|
En el ejemplo siguiente, la línea se sitúa a partir del centro en Firefox, pero en el centro de la mitad derecha en Internet Explorer 8:
| |
hr {
background-color: red;
height: 10px;
margin-left: 50%;
width: 25%;
}
|
Volver al principio de la página
Firefox mantiene el margen interior de <html> y la imagen no toca el borde de <html>, mientras que en Internet Explorer sí que lo hace, como muestran las dos capturas siguientes:
| Firefox |  |
|---|---|
| Internet Explorer 8 |
 |
Volver al principio de la página
Firefox aplica algunos valores de la propiedad list-style-type que Internet Explorer 8 no aplica.
Firefox es capaz de representar todos los estilos, pero en algunos casos es necesario tener instaladas las fuentes correspondientes. Si no están instaladas las fuentes, Firefox muestra un cuadro con el código Unicode del carácter no mostrado (en Firefox 2 y anteriores se mostraba un signo de interrogación (?)). Internet Explorer muestra el punto de las listas no ordenadas cuando no es capaz de representar el estilo.
| |
ul {
list-style-type: hebrew;
}
|
|
| |
ul {
list-style-type: cjk-ideographic;
}
|
|
| |
ul {
list-style-type: hiragana;
}
|
|
| |
ul {
list-style-type: katakana;
}
|
|
| |
ul {
list-style-type: hiragana-iroha;
}
|
|
| |
ul {
list-style-type: katakana-iroha;
}
|
|
Volver al principio de la página
Firefox aplica los valores left y right de la propiedad caption-side que Internet Explorer 8 no aplica.
| |
caption {
caption-side: left;
}
|
|
||||
| |
caption {
caption-side: right;
}
|
|
Volver al principio de la página
En el modo colapsado, si se establece la propiedad border: none Firefox muestra todos los bordes de las celdas, mientras que Internet Explor no muestra el borde entre dos casillas contiguas si ambas tienen la propiedad border: none.
| |
table {
border-collapse: collapse;
}
td.sinborde {
border: none
}
|
|
Volver al principio de la página
Internet Explorer 8 solamente admite en la propiedad cursor e cursores en formato ICO o CUR, (ICO es el formato de los iconos de Windows y CUR es el formato de los cursores no animados de Windows, prácticamente idéntico al formato ICO).
| |
p {
cursor: url("../img/exclamacion.png"), wait;
}
|
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 (o a un reloj de arena si no se puede mostrar la exclamación). |
| |
p {
cursor: url("../img/exclamacion.cur"), wait;
}
|
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 (o a un reloj de arena si no se puede mostrar la exclamación). |
| |
p {
cursor: url("../img/exclamacion.ico"), wait;
}
|
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 (o a un reloj de arena si no se puede mostrar la exclamación). |
Volver al principio de la página
El contorno de un elemento en-línea no se muestra de la misma manera en Internet Explorer que en Firefox.
| |
span.con-outline {
outline: black 3px solid;
}
|
Esto es un párrafo normal y corriente. Esta frase tiene un contorno de estilo solid y para ver la diferencia entre borde y contorno, debería ocupar varias líneas. Esta frase ya no tiene ni borde ni contorno. |
Volver al principio de la página
Firefox no muestra el valor invert (desde la versión FF3.0), mientras que Internet Explorer sí lo hace. En la página de bugs de Firefox se explica qué motivos dan los desarrolladores de Firefox para no hacerlo.
 |
body {
background-color: black;
color:white;
}
|
Esto es un párrafo con contorno de estilo solid. |
Volver al principio de la página
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 principio de la página
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 jugó con la ventaja de que todos los diseñadores de páginas web tenían que asegurarse de que las páginas funcionaran correctamente en Internet Explorer.
Eso tenía y tiene aún varias consecuencias:
Un ejemplo, sin demasiada importancia pero representativo del problema, es 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 ha segudio siempre la recomendación, pero Internet Explorer no lo hacía. ¿Qué ocurría entonces? Que como la mayoría de personas que escribían páginas web desconocían las recomendaciones (lo que no dice mucho en su favor) y no probaban el resultado de sus diseños más que en Internet Explorer (lo que todavía dice menos en su favor), si utilizaban la etiqueta <q> normalmente añadían 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).
El problema es que boicoteo no se limitaba a casos anecdóticos como la etiqueta <q>, sino a aspectos mucho más importantes como el posicionamiento.
El primer problema es menos grave, pera la segunda es muy grave, porque significa que muchísimas páginas web están mal hechas y nunca podrán verse correctamente en navegadores que respeten las recomendaciones del W3C.
Afortunadamente, a partir de 2005, Firefox empezó a tener una cuota de mercado y a amenazar la hegemonía de Internet Explorer. Eso hizo que Microsoft tuviera que "ponerse las pilas" y publicar nuevas versiones de Internet Explorer, mejorando no solamente el interface del navegador (pestañas, zoom, antiphising, bloqueo de popups, etc) sino también el cumplimiento de las recomendaciones. Internet Explorer 7 supuso un avance e Internet Explorer 8 ha supuesto un avance todavía más importante. Actualmente (noviembre de 2009) más de la mitad de los usuarios utilizan navegadores que cumplen las recomendaciones del W3C (Firefox, Chrome, Opera e Internet Explorer 8) y en un par de años ese porcentaje llegará prácticamente al 100% (véanse los gráficos de utilización de navegadores).
Pero la situación todavía no está resuelta. Internet Explorer 8 cumple con el HTML 4.0 y con CSS 2, pero todavía quedan temas pendientes desde hace muchos años, como el soporte del tipo MIME application/xhtml+xml o el soporte de SVG o MathML, y en un futuro próximo se planteará el problema del soporte de HTML 5.
Esperemos que Firefox mantenga en el futuro una parte significativa del mercado y eso impida a Microsoft boicotear las recomendaciones. Paradójicamente, quizás el principal motivo para recomendar el uso de Firefox (o Chrome u Opera) es contribuir así a que Microsoft se vea obligado a colaborar con el W3C.
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.