Diferencias entre Chrome y Firefox

En esta página se recopilan las diferencias entre Chrome y Firefox que aparecen en otras lecciones de estos apuntes. En esta página se incluyen únicamente ejemplos en los que Chrome y Firefox se comportan de forma diferente, aunque también se indica el comportamiento en ellos de Microsoft Edge. En los casos en los que el comportamiento del navegador se puede considerar correcto, se indica con el icono Correcto en Chrome, Correcto en Firefox o Correcto en Edge. En los casos en los que el comportamiento del navegador se puede considerar erróneo, se indica con el icono Incorrecto en Chrome, Incorrecto en Firefox o Incorrecto en Edge.

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

Utilización del navegador

Archivos CSS en UTF-8

Firefox no muestra correctamente los archivos CSS guardados en el juego de caracteres UTF-8.

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.

HTML

Formularios

El atributo accesskey

El atributo accesskey establece la combinación de teclas que coloca el foco en un elemento de un formulario.

  • Firefox utiliza la combinación Alt+Shift+tecla
  • Google Chrome utilizan normalmente la combinación Alt+tecla, pero cuando esa combinación ya está asociada a alguna acción usa la combinación Alt+Shift+tecla
  • Microsoft Edge combina ambos comportamientos: utiliza la combinación Alt+Shift+tecla, pero también permite la combinación Alt+tecla cuando no está asociada a ninguna acción

En el ejemplo siguiente Firefox utiliza la combinación Alt+Shift+tecla para situar el cursor en las cajas de texto, Google Chrome utiliza la combinación Alt+tecla y Microsoft Edge utiliza ambas:

<input type="text" name="texto1" value="Acceso con a" accesskey="a">
<input type="text" name="texto2" value="Acceso con i" accesskey="i">
<input type="text" name="texto3" value="Acceso con o" accesskey="o">
<input type="text" name="texto4" value="Acceso con u" accesskey="u">
ERROR (no puede mostrarse el objeto)
Enlace externo

Chrome utiliza la combinación Alt+tecla, que tiene el inconveniente que entra en conflicto con combinaciones de teclas ya definidas por el navegador o el sistema operativo. Firefox utiliza la combinación Alt+Shift+tecla, más incómoda de utilizar, pero que no interfiere con las combinaciones ya definidas por el navegador o el sistema operativo.

En el ejemplo siguiente, Chrome y Microsoft Edge no pueden acceder a la caja de texto con la combinación Alt+d, ya que esta combinación traslada el foco a la barra de dirección, pero pueden hacerlo con la combinación Alt+Shift+d:

<input type="text" name="texto1" value="Acceso con d" accesskey="d">
ERROR (no puede mostrarse el objeto)
Enlace externo

En el ejemplo siguiente, Chrome no puede acceder a la caja de texto con la combinación Alt+e, ya que esta combinación abre el menú de herramientas, pero puede hacerlo con la combinación Alt+Shift+e:

<input type="text" name="texto2" value="Acceso con e" accesskey="e">
ERROR (no puede mostrarse el objeto)
Enlace externo

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

  • Firefox utiliza la combinación Alt+Shift+tecla
  • Chrome y Microsoft Edge utilizan la combinación Alt+tecla
<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">
ERROR (no puede mostrarse el objeto)
Enlace externo
<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="+">
ERROR (no puede mostrarse el objeto)
Enlace externo

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:

  • Google Chrome no avanza de uno a otro
  • Firefox avanza de uno a otro con la combinación Alt+Shift+tecla
  • Microsoft Edge avanza de uno a otro con la combinación Alt+tecla y retrocede de uno a otro con Alt+Shift+tecla
<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">
ERROR (no puede mostrarse el objeto)
Enlace externo
<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">
ERROR (no puede mostrarse el objeto)
Enlace externo

Control de tipo número: <input type="number">

En el caso de los números decimales:

  • Chrome admite la coma (,) y el punto (.) como separadores de la parte decimal.
  • Firefox sólo admite la coma (,) como separador de la parte decimal.
  • Microsoft Edge sólo admite el punto (.) como separador de la parte decimal.
Escriba un número:
<input type="number" name="numero">
ERROR (no puede mostrarse el objeto)
Enlace externo

Control de tipo mes: <input type="month">

Google Chrome y Microsoft Edge muestran un control específico para seleccionar el mes y el año, pero Firefox no lo hace.

Correcto en Chrome Incorrecto en Firefox Correcto en Edge
Mes: <input type="month" name="mes" size="20">
ERROR (no puede mostrarse el objeto)
Enlace externo

Bugs de Firefox relacionados:

Control de tipo semana: <input type="week">

Google Chrome y Microsoft Edge muestran un control específico para seleccionar la semana y el año, pero Firefox no lo hace.

Correcto en Chrome Incorrecto en Firefox Correcto en Edge
Semana: <input type="week" name="semana" size="20">
ERROR (no puede mostrarse el objeto)
Enlace externo

Bugs de Firefox relacionados:

Control de tipo fecha y hora: <input type="datetime-local">

Google Chrome y Microsoft Edge muestran un control específico para seleccionar la fecha y hora, pero Firefox no lo hace.

Correcto en Chrome Incorrecto en Firefox Correcto en Edge
Fecha y hora: <input type="datetime-local" name="fecha" size="20">
ERROR (no puede mostrarse el objeto)
Enlace externo

Bugs de Firefox relacionados:

Control de tipo imagen: <input type="image">

Microsoft Edge envía el nombre de un control de tipo image cuando se define el atributo value, pero Firefox y Google Chrome no lo hacen.

Correcto en Chrome Correcto en Firefox Incorrecto en Edge
<input type="image" name="diana" value="click me" src="diana.svg" alt="Diana">
ERROR (no puede mostrarse el objeto)
Enlace externo

Favicons

Favicons en formato SVG

Firefox admite favicons en formato SVG, pero Google Chrome y Microsoft Edge no.

Incorrecto en Chrome Correcto en Firefox Incorrecto en Edge
<link rel="icon" type="image/svg+xml" href="favicon-cdlibre.svg" sizes="any">
ERROR (no puede mostrarse el objeto)
Enlace externo

Favicons en archivos locales

Microsoft Edge no muestra los favicons si las páginas no están colgadas en un servidor público (tanto si se abren como un archivo file://... como en un servidor local http://localhost/...).

Favicons animados

Firefox y Microsoft Edge admiten favicons animados, pero Google Chrome no.

Incorrecto en Chrome Correcto en Firefox Correcto en Edge
ERROR (no puede mostrarse el objeto)
Enlace externo

MathML

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

Firefox es capaz de mostrar archivos locales con elementos MathML. Microsoft Edge no. El motivo es es que Microsoft Edge 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.

CSS

Hojas de estilo alternativas

Firefox permite elegir hojas de estilo alternativas, pero Chrome y Microsoft Edge no.

Pseudo-clases y pseudo-elementos

Pseudo-clases de enlace

Microsoft Edge "recuerda" los enlaces visitados mientras no se recargue la página, mientras que Firefox y Google Chrome los recuerdan hasta que se borra el historial en el navegador.

a:link {
  color: green;
}
  
ERROR (no puede mostrarse el objeto)
Enlace externo
a:visited {
  color: red;
}
  
ERROR (no puede mostrarse el objeto)
Enlace externo

El pseudo-elemento ::first-line

Aunque en el ejemplo siguiente, Google Chrome muestra la primera línea en mayúsculas, pero no correctamente. Parte del texto se pierde por el lado derecho. Parece como si Chrome calculara las palabras que se muestran en la primera línea de texto teniendo en cuenta el tamaño en minúsculas y al aplicar posteriormente el cambio a mayúsculas, el tamaño es mayor y el texto se extiende por la derecha, fuera de la vista.

Incorrecto en Chrome Correcto en Firefox Correcto en Edge
p::first-line {
  text-transform: uppercase;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

El pseudo-elemento ::first-letter

Si la imagen situada al principio del elemento es una imagen flotante, Firefox no modifica el aspecto de la primera letra de texto, aunque Chrome y Edge sí lo hacen.

Incorrecto en Chrome Correcto en Firefox Incorrecto en Edge
p::first-letter {
  color: red;
}

img {
  float: right;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
Incorrecto en Chrome Correcto en Firefox Incorrecto en Edge
p::first-letter {
  color: red;
}

img {
  float: left;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Nota: En realidad no tengo claro si quien lo hace bien es Firefox o Chrome y Edge.

Fuente

Propiedad font-style

Si el ordenador dispone de fuentes que tengan ambas variantes, Firefox distingue entre los valores italic y oblique de la propiedad font-style, mientras que Google Chrome y Microsoft Edge no lo hacen.

El ejemplo siguiente puede verse correctamente en Firefox una vez instalada la fuente libre Latin Modern Roman (realmente son 11 fuentes distintas para cubrir las variantes más habituales).

Incorrecto en Chrome Correcto en Firefox Incorrecto en Edge
  p.italic {
  font-family: "Latin Modern Roman 10";
  font-style: italic;
}

p.oblique {
  font-family: "Latin Modern Roman 10";
  font-style: oblique;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

El ejemplo anterior da el siguiente resultado en Firefox 62:

Ejemplo de fuente oblique e italic

Propiedad font-size-adjust

La propiedad font-size-adjust funciona parcialmente en Firefox, pero no en Google Chrome ni Microsoft Edge.

Correcto en Chrome Correcto en Firefox Correcto en Edge
p {
  font-size: 20px;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
Incorrecto en Chrome Correcto en Firefox Incorrecto en Edge
p {
  font-size: 20px;
  font-size-adjust: 1.5;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
Incorrecto en Chrome Incorrecto en Firefox Incorrecto en Edge
p {
  font-size: 20px;
  font-size-adjust: 0.5;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Texto

Propiedad text-decoration: overline

Si un párrafo tiene sobrerrayado y el tamaño de las palabras no es siempre el mismo:

  • Chrome y Microsoft Edge dibujan la línea en la parte superior de cada carácter, desplazándola verticalmente en función del tamaño del carácter.
  • Firefox mantiene la línea de sobrerrayado a la misma altura a lo largo de todo el párrafo, pero basándose en el texto de menor tamaño.

Probablemente, la recomendación no especifica qué hacer en este caso particular y cada navegador ha adoptado una solución diferente (por confirmar)

Por determinar en Chrome Por determinar en Firefox Por determinar en Edge
<p style="text-decoration: overline">
  Un
  <span style="font-size: 200%">párrafo</span>
  <span style="font-size: 300%">sobrerrayado</span>.
</p>

<p style="text-decoration: overline">
  <span style="font-size: 300%">Otro</span>
  <span style="font-size: 200%">párrafo</span>
  sobrerrayado.
</p>
ERROR (no puede mostrarse el objeto)
Enlace externo

Líneas horizontales

Propiedad color

En Firefox la propiedad color establece el color del borde de la línea, pero en Chrome y Microsoft Edge no lo hace.

Incorrecto en Chrome Correcto en Firefox Incorrecto en Edge
hr {
  color: red;
}
  
ERROR (no puede mostrarse el objeto)
Enlace externo
Incorrecto en Chrome Correcto en Firefox Incorrecto en Edge
hr {
  height: 1px;
  color: red;
}
  
ERROR (no puede mostrarse el objeto)
Enlace externo
Incorrecto en Chrome Correcto en Firefox Incorrecto en Edge
hr {
  height: 10px;
  color: red;
}
  
ERROR (no puede mostrarse el objeto)
Enlace externo

Listas

Icono del elemento <summary> de <details>

Google Chrome y Microsoft Edge no permiten establecer el icono que muestra el elemento interactivo <summary> de <details> con la propiedad list-style-type, pero Firefox sí lo hace.

Incorrecto en Chrome Correcto en Firefox Incorrecto en Edge
summary {
  list-style-type: circle;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
Incorrecto en Chrome Correcto en Firefox Incorrecto en Edge
summary {
  list-style-image: url("../smiley.png");
}
  
ERROR (no puede mostrarse el objeto)
Enlace externo

Interface de usuario

El valor context-menu de la propiedad cursor

Microsoft Edge muestra el icono correspondiente al valor context-menu de la propiedad cursor, pero Firefox y Google Chrome no lo hacen.

Incorrecto en Chrome Incorrecto en Firefox Correcto en Edge
p {
  cursor: context-menu;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

La propiedad cursor

Microsoft Edge solamente admite en la propiedad cursor 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), mientras que Firefox y Google Chrome admiten otros formatos de imagen.

Correcto en Chrome Correcto en Firefox Incorrecto en Edge
p {
  cursor: url("exclamacion.png"), wait;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Contorno outline de un elemento en-línea

El contorno de un elemento en-línea no se muestra de la misma manera en Microsoft Edge y Google Chrome que en Firefox.

Por determinar en Chrome Por determinar en Firefox Por determinar en Edge
span.con-outline {
  outline: black 3px solid;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
Incorrecto en Chrome Incorrecto en Firefox Correcto en Edge
body {
  background-color: black;
  color: white;
}

p {
  outline: invert 3px solid;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
Incorrecto en Chrome Incorrecto en Firefox Correcto en Edge
body {
  background-color: red;
  color: white;
}

p {
  outline: invert 3px solid;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Color invert en la propiedad outline

Firefox y Google Chrome no muestran el valor invert, mientras que Microsoft Edge 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 Chrome Incorrecto en Firefox Correcto en Edge
body {
  background-color: black;
  color: white;
}

p {
  outline: invert 3px solid;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
Incorrecto en Chrome Incorrecto en Firefox Correcto en Edge
body {
  background-color: black;
  color: white;
}

p {
  outline: invert 3px solid;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
Incorrecto en Chrome Incorrecto en Firefox Correcto en Edge
body {
  background-color: red;
  color: white;
}

p {
  outline: invert 3px solid;
}
ERROR (no puede mostrarse el objeto)
Enlace externo