Diferencias entre Chrome, Firefox y Microsoft Edge. Páginas web HTML y hojas de estilo CSS. Bartolomé Sintes Marco

Diferencias entre Chrome, Firefox y Microsoft Edge

En esta página se comentan algunas de las diferencias entre Chrome, Firefox y 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, agrupándolas por temas:

¡Atención! Esta página está pendiente de actualizar, haciendo referencia a Chrome y Microsoft Edge en todos los ejemplos.

Diferencias por incluir

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

Internet Explorer 11 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.

Teclas de acceso en formularios

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

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

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

<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

HTML

Listas

Lista dentro de lista

La lista del ejemplo se ve de forma distinta en Google Chrome, Firefox y Microsoft Edge:

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. Google Chrome y Firefox muestran dos marcadores a la misma altura, mientras que Edge los muestra a diferentes alturas.

Correcto en Chrome Correcto en Firefox Incorrecto en Edge
<ul>
  <li>
    <ul>
      <li>Elemento de lista</li>
    </ul>
  </li>
</ul>
ERROR (no puede mostrarse el objeto)
Enlace externo

Tablas

El atributo rules

Nota: No comprobado en Edge.

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 Edge e 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.

Posicionamiento

Posicionamiento fijo

Nota: No comprobado en Edge.

Edge e Internet Explorer no aplican correctamente el posicionamiento fijo (position: fixed) a una tabla. Colocan 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, Edge y Internet Explorer ya lo hacen bien.

Formularios

Número: <input type="number" />

Internet Explorer sólo muestra mensajes de error en algunos casos muy concretos, si se mezclan letras y números envía el dato y si se escriben sólo letras no muestra mensajes de error aunque no envía nada en el control.

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.
  • Internet Explorer 11 no reconoce el atributo step y no muestra mensajes de error; además envía cualquier cosa que no tenga letras, aunque no sea un número válido.

Favicons

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://).

Favicons animados

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

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

CSS

Hojas de estilo alternativas

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

Propiedad text-decoration: overline

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

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>
ERROR (no puede mostrarse el objeto)
Enlace externo

Pseudo-clases y pseudo-elementos

Los navegadores "recuerdan" los enlaces visitados, pero no de la misma manera. Internet Explorer 11 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 y Google Chrome, el contenido generado no puede seleccionarse con el ratón, pero en Microsoft Edge sí.

p.cuidado::before {
  content: "Aviso: ";
  font-weight: bold;
  text-decoration: underline;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p.autor-barto::after {
  content: " (escrito por Barto).";
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Fuente

Propiedad font-size-adjust

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

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

Líneas horizontales

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

Cuando se aplican las propiedades margin-left, margin-right y width a una línea, la línea se dibuja a la izquierda del espacio definido por los márgenes si hay margin-left o a la derecha si sólo hay margin-right.

Microsoft Edge no interpreta correctamente las propiedades margin-left y margin-right cuando se utilizan junto con width. En Microsoft Edge, la línea se dibuja en el centro del espacio definido por los márgenes.

En el ejemplo siguiente, la línea se sitúa a la izquierda del todo en Firefox y Chrome, pero en el centro en Microsoft Edge:

Correcto en Chrome Correcto en Firefox Incorrecto en Edge
hr {
background-color: red;
height: 10px;
margin-left: 0%;
width: 50%;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

En el ejemplo siguiente, la línea se sitúa a la derecha del todo en Firefox y Chrome, pero en el centro en Microsoft Edge:

Correcto en Chrome Correcto en Firefox Incorrecto en Edge
hr {
background-color: red;
height: 10px;
margin-right: 0%;
width: 50%;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

En el ejemplo siguiente, la línea se sitúa a partir del centro en Firefox y Chrome, pero en el centro de la mitad derecha en Microsoft Edge:

Correcto en Chrome Correcto en Firefox Incorrecto en Edge
hr {
background-color: red;
height: 10px;
margin-left: 50%;
width: 25%;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Listas

Tipo predefinidos de marcador: list-style-type

Firefox y Google Chrome aplican algunos valores de la propiedad list-style-type que Microsoft Edge no aplica. En esos casos, Microsoft Edge muestra las listas con el punto de las listas no ordenadas.

Correcto en Chrome Correcto en Firefox Incorrecto en Edge
ul {
  list-style-type: hebrew;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
Correcto en Chrome Correcto en Firefox Incorrecto en Edge
ul {
  list-style-type: cjk-ideographic;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
Correcto en Chrome Correcto en Firefox Incorrecto en Edge
ul {
  list-style-type: hiragana;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
Correcto en Chrome Correcto en Firefox Incorrecto en Edge
ul {
  list-style-type: katakana;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
Correcto en Chrome Correcto en Firefox Incorrecto en Edge
ul {
  list-style-type: hiragana-iroha;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
Correcto en Chrome Correcto en Firefox Incorrecto en Edge
ul {
  list-style-type: katakana-iroha;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Tablas

La propiedad caption-side

Firefox aplica los valores left y right de la propiedad caption-side que Chrome y Microsoft Edge no aplican. Pero como la recomendación vigente no permite esos valores, se tiene que considerar que Firefox lo está haciendo incorrectamente.

Correcto en Chrome Incorrecto en Firefox Correcto en Edge
caption {
  caption-side: left;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
Correcto en Chrome Incorrecto en Firefox Correcto en Edge
caption {
  caption-side: right;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Interface de usuario

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("../img/exclamacion.png"), wait;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

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 y Google Chrome que en Firefox.

span.con-outline {
  outline: black 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

Otros

SVG

Internet Explorer muestra los elementos svg situados fuera de la zona definida por viewBox, mientras que Firefox y Google Chrome sólo muestran los elementos o la parte de los elementos situados dentro de la zona definida por viewBox.

MathML

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

Formato de imágenes de mapa de bits APNG

Firefox y Google Chrome muestran las imágenes en formato APNG, pero Microsoft Edge no lo hace.

Correcto en Chrome Correcto en Firefox Incorrecto en Edge
<img src="apng-balon.png" alt="Ejempo de imagen en formato APNG" />

Ejempo de imagen en formato APNG

Enlace externo