Volver al índiceDiferencias entre Firefox e Internet Explorer 10

En esta página se comentan algunas de las diferencias entre Firefox e Internet Explorer 10. En los casos en los que el comportamiento del navegador se puede considerar correcto, se indica con el icono Correcto en Internet Explorer o Correcto en Firefox. En los casos en los que el comportamiento del navegador se puede considerar erróneo, se indica con el icono Incorrecto en Internet Explorer o Incorrecto en Firefox.

Esta página no pretende ser una relación exhaustiva de diferencias, sino simplemente recopilar las diferencias que encontré al redactar estos apuntes, agrupándolas por temas:

Nota: Esta página está pendiente de actualizar para Internet Explorer 11.

Nota: Algunas de las diferencias incluidas en esta página están pendientes de confirmar en Internet Explorer 10.


Utilización del navegador

Zoom

Internet Explorer 10 dispone de dos tipos de zoom:

Firefox dispone de dos tipos de zoom:

En Firefox los dos tipos de zoom funcionan mediante el menú Ver > Tamaño, con las combinaciones de teclas Ctrl++ y Ctrl+- o con la combinación Ctrl+rueda del ratón. La opción del menú Ver > Tamaño >Sólo ampliar texto permite elegir el tipo de zoom a aplicar.

Volver al principio de la página


Teclas de acceso en formularios

Para acceder a las teclas de acceso, cada navegador utiliza una combinación de teclas distinta:

Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
<input type="text" name="texto1" value="Acceso con a" accesskey="a" />
<input type="text" name="texto2" value="Acceso con e" accesskey="e" />
<input type="text" name="texto3" value="Acceso con i" accesskey="i" />
<input type="text" name="texto4" value="Acceso con o" accesskey="o" />

En el caso de las teclas de acceso que no son las letras del alfabeto (los acentos no pueden ser teclas de acceso):

Correcto en Firefox Correcto en Internet Explorer Incorrecto en Chrome
<input type="text" name="texto1" value="Acceso con 1" accesskey="1" />
<input type="text" name="texto2" value="Acceso con 2" accesskey="2" />
<input type="text" name="texto3" value="Acceso con 3" accesskey="3" />
<input type="text" name="texto4" value="Acceso con 4" accesskey="4" />
Correcto en Firefox Correcto en Internet Explorer Incorrecto en Chrome
<input type="text" name="texto1" value="Acceso con ," accesskey="," />
<input type="text" name="texto2" value="Acceso con -" accesskey="." />
<input type="text" name="texto3" value="Acceso con +" accesskey="+" />

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:

Correcto en Firefox Correcto en Internet Explorer Incorrecto en Chrome
<input type="text" name="texto1" value="Acceso con z" accesskey="z" />
<input type="text" name="texto2" value="Acceso con z" accesskey="z" />
<input type="text" name="texto3" value="Acceso con z" accesskey="z" />
Correcto en Firefox Correcto en Internet Explorer Incorrecto en Chrome
<input type="text" name="texto1" value="Acceso con w" accesskey="w" />
<input type="text" name="texto2" value="Acceso con W" accesskey="W" /
<input type="text" name="texto3" value="Acceso con W" accesskey="W" />

Volver al principio de la página


HTML

Listas

Lista dentro de lista

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

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 10 los muestra a diferentes alturas.

Volver al principio de la página


Tablas

El atributo rules

Nota: No comprobado en Internet Explorer 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.

Volver al principio de la página


Posicionamiento

Posicionamiento fijo

Nota: No comprobado en Internet Explorer 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.

Volver al principio de la página


Formularios

Botón button sin atributo type

Nota: No comprobado en Internet Explorer 10.

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.

Correcto en Firefox Correcto en Internet Explorer <button>Botón</button>

Volver al principio de la página


Teclas de acceso

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 10 avanzan de uno en uno (FF con Alt+Shift+tecla, IE10 con Alt+tecla). Internet Explorer 10 usa Alt+Shift+tecla para retroceder de uno en uno.

Correcto en Firefox Correcto en Internet Explorer <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" />
Correcto en Firefox Correcto en Internet Explorer <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


Favicons

Internet Explorer 10 no admite la forma de enlazar los favicons recomendada por el W3C, mientras que Firefox sí lo hace. Además, Internet Explorer 10 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
Correcto en Firefox Correcto en Internet Explorer <link rel="shortcut icon" href="cdlibre.ico"/> favicon tamaño 16x16 favicon tamaño 32x32 favicon tamaño 32x32
Correcto en Firefox Incorrecto en Internet Explorer <link rel="icon" type="image/png" href="cdlibre.png" /> favicon tamaño 16x16 favicon tamaño 32x32
Correcto en Firefox Incorrecto en Internet Explorer <link rel="icon" type="image/vnd.microsoft.icon" href="cdlibre.ico"/> favicon tamaño 16x16 favicon tamaño 32x32 favicon tamaño 32x32

Volver al principio de la página


favicons en archivos locales

Internet Explorer no muestra los favicons si las páginas no están colgadas en un servidor (es decir, si se abren como un archivo file://).

Volver al principio de la página


Favicons animados

Firefox admite favicons animados, en forma de gifs animados, pero Internet Explorer y Google Chrome no.

Correcto en FirefoxIncorrecto en IE Incorrecto en Chrome La siguiente página muestra un ejemplo de favicon animado:

Volver al principio de la página


CSS

Pseudo-clases y pseudo-elementos

Los navegadores "recuerdan" los enlaces visitados, pero no de la misma manera. Internet Explorer 10 los recuerda mientras no se recargue la página, mientras que Firefox los recuerda hasta que se borra el historial en el navegador.


Los pseudo-elementos :before y :after

En Firefox, el contenido generado no puede seleccionarse con el ratón, pero en Internet Explorer 10 sí.

Correcto en Firefox Correcto en Internet Explorer
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.

Correcto en Firefox Correcto en Internet Explorer
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.

Volver al principio de la página


Fuente

Propiedad font-size-adjust

La propiedad font-size-adjust funciona en Firefox, pero no en Internet Explorer 10. 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.

Correcto en Firefox Incorrecto en Internet Explorer
p { 
  font-size: 16px;
  font-size-adjust: 1.5; 
}

Esta letra x tiene 16 x 1.5 = 24 px de altura.

Correcto en Firefox Incorrecto en Internet Explorer
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


Texto

Líneas horizontales

En Firefox la propiedad color establece el color del borde de la línea, pero en Internet Explorer 10 no.

Correcto en Firefox Incorrecto en Internet Explorer
hr { 
  color: red; 
}

Correcto en Firefox Incorrecto en Internet Explorer
hr { 
  color: red; 
  height: 1px;
}

Correcto en Firefox Incorrecto en Internet Explorer
hr { 
  color: red; 
  height: 10px;
}


Si se usa la propiedad width junto con margin-left y margin-right, Internet Explorer 10 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 10:

Correcto en Firefox Incorrecto en Internet Explorer
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 10:

Correcto en Firefox Incorrecto en Internet Explorer
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 10:

Correcto en Firefox Incorrecto en Internet Explorer
hr {
  background-color: red; 
  height: 10px; 
  margin-left: 50%;
  width: 25%; 
}

Volver al principio de la página


Listas

Tipo predefinidos de marcador: list-style-type

Firefox aplica algunos valores de la propiedad list-style-type que Internet Explorer 10 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.

Correcto en Firefox Incorrecto en Internet Explorer
ul { 
  list-style-type: hebrew; 
}
  • Esto es un punto de una lista
  • Esto es otro punto de la misma lista
Correcto en Firefox Incorrecto en Internet Explorer
ul { 
  list-style-type: cjk-ideographic; 
}
  • Esto es un punto de una lista
  • Esto es otro punto de la misma lista
Correcto en Firefox Incorrecto en Internet Explorer
ul { 
  list-style-type: hiragana; 
}
  • Esto es un punto de una lista
  • Esto es otro punto de la misma lista
Correcto en Firefox Incorrecto en Internet Explorer
ul { 
  list-style-type: katakana; 
}
  • Esto es un punto de una lista
  • Esto es otro punto de la misma lista
Correcto en Firefox Incorrecto en Internet Explorer
ul { 
  list-style-type: hiragana-iroha; 
}
  • Esto es un punto de una lista
  • Esto es otro punto de la misma lista
Correcto en Firefox Incorrecto en Internet Explorer
ul { 
  list-style-type: katakana-iroha; 
}
  • 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

Firefox aplica los valores left y right de la propiedad caption-side que Internet Explorer 10 no aplica.

Correcto en Firefox Incorrecto en Internet Explorer
caption { 
  caption-side: left; 
}
Esto es la leyenda
Celda 1 Celda 2
Celda 3 Celda 4
Correcto en Firefox Incorrecto en Internet Explorer
caption { 
  caption-side: right; 
}
Esto es la leyenda
Celda 1 Celda 2
Celda 3 Celda 4

Volver al principio de la página


Interface de usuario

La propiedad cursor

Internet Explorer 10 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).

Correcto en Firefox Incorrecto en Internet Explorer
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).

Correcto en Firefox Correcto en Internet Explorer
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).

Correcto en Firefox Correcto en Internet Explorer
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


La propiedad outline

Contorno de un elemento en-línea

El contorno de un elemento en-línea no se muestra de la misma manera en Internet Explorer que en Firefox.

Correcto en Firefox Correcto en Internet Explorer
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


Color invert en la propiedad outline

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.

Incorrecto en Firefox Correcto en Internet Explorer
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


Otros

MathML

Firefox es capaz de mostrar elementos MathML sin necesidad de plug-ins, aunque es necesario instalar fuentes adecuadas. Internet Explorer 10 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


Formato de imágenes de mapa de bits APNG

Firefox muestra las imágenes en formato APNG, pero Internet Explorer 10 no lo hace.

Correcto en Firefox Incorrecto en Internet Explorer Incorrecto en Chrome
<img alt="Ejempo de imagen en formato APNG" 
src="apng_balon.png" />
Ejempo de imagen en formato APNG
Correcto en Firefox Incorrecto en Internet Explorer Incorrecto en Chrome
<img alt="Ejempo de imagen en formato APNG" 
src="apng_balon.png" 
style="background-colo: lightblue" />
Ejempo de imagen en formato APNG

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
Autor: Bartolomé Sintes Marco
Última modificación: 12 de noviembre de 2013

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