Diferencias entre Microsoft Edge (original) y Firefox y Google Chrome

En esta página se recopilan las diferencias que había entre el Microsoft Edge original, el navegador incluido en Windows 10 entre 2015 y 2020, y Google Chrome y Firefox. En 2018 Microsoft anunció la sustitución de Microsoft Edge por un navegador basado en Chromium, el motor de Google Chrome, cuya primera versión estable se publicó finalmente en enero de 2020. Este nuevo navegador se sigue llamando Microsoft Edge, aunque también se le suele denominar Edge Chromium cuando se le quiere distinguir de la versión anterior. Hasta junio de 2020 las diferencias que aparecen en esta página aparecían también en las lecciones de estos apuntes, pero en junio de 2020 las he eliminado.

En esta página se incluyen únicamente ejemplos en los que Microsoft Edge (original) se comportaba de forma diferente a Google Chrome o Firefox. 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

Para ver el código fuente de una página web en Edge, primero había que abrir la página about:flags y marcar la casilla "Mostrar código fuente". A partir de ese momento, al hacer clic derecho sobre cualquier página, el menú contextual mostraba la opción Ver origen. El código fuente se mostraba en la ventana de desarrolladores.

HTML

Texto

Abreviatura: <abbr>

Microsoft Edge (original) no resaltaba resaltaba los elementos <abbr> con atributo title con un subrayado punteado (propiedad CSS 3 text-decoration: underline dotted black), mientras que Firefox y Google Chrome sí lo hacen.

<p>Sitúa el cursor del ratón sobre la abreviatura <abbr title="cónfer (compárese, véase)">cf</abbr> para ver su significado.</p>
ERROR (no puede mostrarse el objeto)
Enlace externo

Teclado: <kbd>

Microsoft Edge (original) aumentaba el tamaño de la fuente al destacar la etiqueta <kbd> usando un tipo de letra no proporcional (propiedad font-family: monospace), mientras que Firefox y Google Chrome no lo hacen.

<p>En los navegadores, pulsando <kbd>Ctrl+t</kbd> se abre una nueva pestaña.</p>
ERROR (no puede mostrarse el objeto)
Enlace externo

CSS 3 Énfasis: text-emphasis

Las propiedades text-emphasis, text-emphasis-style y text-emphasis-position funcionaban en Microsoft Edge (original) y Firefox, pero no funcionaban en Google Chrome.

Incorrecto en Chrome Correcto en Firefox Correcto en Edge
p {
  text-emphasis: dot red;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
Incorrecto en Chrome Correcto en Firefox Correcto en Edge
p {
  text-emphasis: circle red;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
Incorrecto en Chrome Correcto en Firefox Correcto en Edge
p {
  text-emphasis: double-circle red;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
Incorrecto en Chrome Correcto en Firefox Correcto en Edge
p {
  text-emphasis: triangle red;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
Incorrecto en Chrome Correcto en Firefox Correcto en Edge
p {
  text-emphasis: sesame red;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
Incorrecto en Chrome Correcto en Firefox Correcto en Edge
p {
  text-emphasis: "X" red;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

La propiedad text-emphasis-position no funcionaba en Microsoft Edge (original) ni en Google Chrome, pero sí en Firefox.

Incorrecto en Chrome Correcto en Firefox Incorrecto en Edge
p {
  text-emphasis: double-circle red;
  text-emphasis-position: under right;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Imágenes

APNG

Microsoft Edge (original) no mostraba las imágenes APNG, mientras que Firefox y Google Chrome sí lo hacen.

Correcto en Chrome Correcto en Firefox Incorrecto en Edge
<img src="apng-balon.png" alt="Ejemplo de imagen en formato APNG">
ERROR (no puede mostrarse el objeto)
Enlace externo
Correcto en Chrome Correcto en Firefox Incorrecto en Edge
<img src="apng-balon.png" alt="Ejemplo de imagen en formato APNG"
  style="background-color: lightblue">
ERROR (no puede mostrarse el objeto)
Enlace externo

WebP

Microsoft Edge (original) admitió imágenes WebP desde la versión Edge 18, publicado en octubre de 2018 [ref].

<img src="webp-arbol.webp" alt="Ejemplo de imagen en formato WebP"
  width="320" height="241">
ERROR (no puede mostrarse el objeto)
Enlace externo

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, mientras que cuando esa combinación ya está asociada a alguna acción usa la combinación Alt+Shift+tecla
  • Microsoft Edge (original) combinaba ambos comportamientos: utilizaba la combinación Alt+Shift+tecla, mientras que también permitía la combinación Alt+tecla cuando no estaba 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 (original) utilizaba 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

Google 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, mientras que que no interfiere con las combinaciones ya definidas por el navegador o el sistema operativo.

En el ejemplo siguiente, Microsoft Edge (original) no podía 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, mientras que podía 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, Google 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, mientras que 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
  • Google Chrome y Microsoft Edge (original) utilizaban 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 (original) avanzaba de uno a otro con la combinación Alt+tecla y retrocedía 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:

  • Google 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 (original) sólo admitía 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">

Microsoft Edge (original) mostraba un control específico para seleccionar el mes y el año, al igual que Google Chrome, mientras que 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">

Microsoft Edge (original) mostraba un control específico para seleccionar la semana y el año, al igual que Google Chrome, mientras que 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">

Microsoft Edge (original) mostraba un control específico para seleccionar la fecha y hora, al igual que Google Chrome, mientras que 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 (original) enviaba el nombre de un control de tipo image cuando se define el atributo value, mientras que 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

Microsoft Edge (original) no admitía favicons en formato SVG, al igual que Google Chrome, mientras que Firefox sí lo hace.

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 (original) no mostraba los favicons si las páginas no estaban colgadas en un servidor público (tanto si se abrían como un archivo file://... como en un servidor local http://localhost/...).

Favicons animados

Microsoft Edge (original) admitía favicons animados, al igual que Firefox, mientras que Google Chrome no lo hace.

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

Elementos interactivos

Detalles <details>

Microsoft Edge (original) no admitía la etiqueta <details>, mientras que Firefox y Google Chrome sí que la admiten.

Correcto en Chrome Correcto en Firefox Incorrecto en Edge
<p>En la película de 1968 ... </p>

<details>
  <summary>Spoiler</summary>
  <p>En la escena final, el protagonista encuentra ... </p>
</details>
ERROR (no puede mostrarse el objeto)
Enlace externo

MathML

Microsoft Edge (original) no era capaz de mostrar elementos MathML, aunque se podía instalar un plug-in gratuito para conseguirlo, por ejemplo MathPlayer de DesignScience, cuya versión MathPlayer 4.0 se publicó en enero de 2016.

Microsoft Edge (original) no era capaz de mostrar archivos locales con elementos MathML, mientras que Firefox sí lo hace. El motivo es es que Microsoft Edge (original) cargaba 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.

Microsoft no tenía previsto incluir el soporte de MathML: MathML Microsoft Edge (original) status [copia en archive.org].

CSS

Hojas de estilo alternativas

Microsoft Edge (original) no permitía elegir hojas de estilo alternativas, al igual que Google Chrome, mientras que Firefox sí lo hace.

Pseudo-clases y pseudo-elementos

Pseudo-clases de enlace

Microsoft Edge (original) "recordaba" los enlaces visitados mientras no se recargara 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, mientras que no correctamente. Parte del texto se pierde por el lado derecho. Parece como si Google 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, Microsoft Edge (original) modificaba el aspecto de la primera letra de texto, al igual que Google Chrome, mientras que Firefox no lo hace.

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 Google Chrome y Edge.

Fuente

Propiedad font

Si los navegadores no entienden alguna de las propiedades incluidas en la propiedad compuesta, Microsoft Edge (original) no aplicaba ninguna propiedad si no entendía alguna de las propiedades incluidas en la propiedad compuesta, mientras que Firefox y Google Chrome aplican el resto de propiedades.

En el ejemplo siguiente, Firefox y Google Chrome no aplican el valor condensed, aunque sí los valores 120% y sans-serif. El motivo por el que no aplican la propiedad font-stretch es porque actualmente (octubre de 2019) la fuente no incluye esa variante (en el apartado dedicado a la propiedad font-stretch se comenta cómo conseguir que la apliquen, utilizando la regla-arroba @font-face).

Correcto en Chrome Correcto en Firefox Incorrecto en Edge
p {
  font: condensed 120% sans-serif;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Propiedad font-style

Microsoft Edge (original) no distinguía entre los valores italic y oblique de la propiedad font-style, al igual que Google Chrome, mientras que Firefox sí lo hace si el ordenador dispone de fuentes que tengan ambas variantes.

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

Microsoft Edge no admitía la propiedad font-size-adjust, al igual que Google Chrome, mientras que en Firefox funciona parcialmente.

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

Versalitas: font-variant-caps

Microsoft Edge (original) no admitía algunos de los valores de la propiedad font-variant-caps.

Correcto en Chrome Correcto en Firefox Incorrecto en Edge
p {
  font-variant: all-small-caps;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
Incorrecto en Chrome Incorrecto en Firefox Incorrecto en Edge
p {
  font-variant: petite-caps;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
Incorrecto en Chrome Incorrecto en Firefox Incorrecto en Edge
p {
  font-variant: all-petite-caps;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
Incorrecto en Chrome Incorrecto en Firefox Incorrecto en Edge
p {
  font-variant: titling-caps;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Kerning: font-kerning

Microsoft Edge (original) no aplicaba la propiedad font-kerning, mientras que Firefox y Google Chrome sí lo hacen..

Correcto en Chrome Correcto en Firefox Incorrecto en Edge
p {
  font-kerning: auto;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
Correcto en Chrome Correcto en Firefox Incorrecto en Edge
p {
  font-kerning: normal;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
Correcto en Chrome Correcto en Firefox Incorrecto en Edge
p {
  font-kerning: none;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Ligaduras: font-variant-ligatures

Microsoft Edge (original) no aplicaba la propiedad font-variant-ligatures, mientras que Firefox y Google Chrome sí lo hacen.

Correcto en Chrome Correcto en Firefox Incorrecto en Edge
p {
  font-variant-ligatures: normal;
}
  
ERROR (no puede mostrarse el objeto)
Enlace externo
Correcto en Chrome Correcto en Firefox Incorrecto en Edge
p {
  font-variant-ligatures: none;
}
  
ERROR (no puede mostrarse el objeto)
Enlace externo

Formato de números: font-variant-numeric

Microsoft Edge (original) no aplicaba la propiedad font-variant-numeric, mientras que Firefox y Google Chrome sí lo hacen.

Correcto en Chrome Correcto en Firefox Incorrecto en Edge
p {
  font-variant-numeric: proportional-nums;
}
  
ERROR (no puede mostrarse el objeto)
Enlace externo
Correcto en Chrome Correcto en Firefox Incorrecto en Edge
p {
  font-variant-numeric: tabular-nums;
}
  
ERROR (no puede mostrarse el objeto)
Enlace externo

Fuentes web

Microsoft Edge (original) admitía fuentes web en formato WOFF 2 (Web Open Font Format, .woff2), mientras que Internet Explorer Explorer 11 sólo admitía WOFF 1.

Texto

Propiedad text-decoration: overline

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

  • Microsoft Edge (original) dibujaba la línea en la parte superior de cada carácter, desplazándola verticalmente en función del tamaño del carácter, al igual que Google Chrome.
  • Firefox mantiene la línea de sobrerrayado a la misma altura a lo largo de todo el párrafo, mientras que 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

Sombreado: text-shadow

Microsoft Edge (original) admitía un cuarto valor numérico en la propiedad text-shadow que no está definido en la recomendación CSS Text Decoration Module Level 3. Este cuarto valor extiende la sombra en todas las direcciones.

Correcto en Chrome Correcto en Firefox Incorrecto en Edge
p {
  text-shadow: gray 0 0 0 6px;
  font-size: 200%;
  font-weight: bold;
  letter-spacing: 10px;
  text-align: center;
  text-transform: uppercase;
}
  
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, mientras que en Google Chrome y Microsoft Edge (original) 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

Propiedades margin-left, margin-right y width

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 (original) no interpretaba correctamente las propiedades margin-left y margin-right cuando se utilizan junto con width. En Microsoft Edge (original), la línea se dibujaba en el centro del espacio definido por los márgenes.

En el ejemplo siguiente, la línea se situaba en el centro en Microsoft Edge (original), mientras que lo hace a la izquierda del todo en Firefox y Google Chrome:

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 situaba en el centro en Microsoft Edge (original), mientras que lo hace a la derecha del todo en Firefox y Google Chrome:

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 situaba en el centro de la mitad derecha en Microsoft Edge (original), mientras que lo hace a partir del centro en Firefox y Google Chrome:

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

Posicionamiento

Posicionamiento flotante de caracteres: letra capital

Microsoft Edge (original) mostraba los dos ejemplos siguientes de la misma manera, al igual que Google Chrome, mientras que Firefox no lo hace.

span.capital {
  float: left;
  background-color: pink;
  color: red;
  font-family: monospace;
  font-size: 400%;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p.capital::first-letter {
  float: left;
  background-color: pink;
  color: red;
  font-family: monospace;
  font-size: 400%;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Listas

Tipo predefinidos de marcador: list-style-type

Microsoft Edge (original) no mostraba algunos de los valores de la propiedad list-style-type, mientras que Firefox y Google Chrome sí lo hacen. En su lugar, Microsoft Edge (original) mostraba la lista como una lista no ordenada estándar.

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

Lista dentro de lista

En el ejemplo siguiente se muestra una lista no ordenada dentro de otra lista no ordenada. La lista superior no contiene ningún texto, salvo el incluido en la lista inferior.

Microsoft Edge (original) mostraba los dos marcadores a distintas alturas, mientras que Google Chrome los mostraban a la misma altura.

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

Icono del elemento <summary> de <details>

Microsoft Edge (original) no permitía establecer el icono que muestra el elemento interactivo <summary> de <details> con la propiedad list-style-type, al igual que Google Chrome, mientras que 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

Interfaz de usuario

El valor context-menu de la propiedad cursor

Microsoft Edge (original) mostraba el icono correspondiente al valor context-menu de la propiedad cursor, mientras que 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 (original) solamente admitía 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 mostraba de la misma manera en Microsoft Edge (original) 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

Microsoft Edge (original) mostraba el valor invert en la propiedad outline, mientras que Firefox y Google Chrome no lo hacen. 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

La propiedad compuesta columns

Si se escriben dos valores en la propiedad compuesta columns, si el elemento tiene un tamaño predefinido, Microsoft Edge (original) hacía caso únicamente del número de columnas, mientras que si el elemento no tiene un tamaño predefinido (tablas, elementos flotantes, etc.), Microsoft Edge (original) hacía caso de los dos valores, como Firefox. Google Chrome no lo hace.

Incorrecto en Chrome Correcto en Firefox Correcto en Edge
p {
  columns: 2 8em;
  float: left;
  text-align: justify;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Nombres de las propiedades no estándar

La web de documentación Mozilla Developer Network contiene una lista de propiedades no estándar de Microsoft Edge (original): Edge (-ms-)

Peter Beverloo recopiló una Lista de propiedades no estándar de Internet Explorer (Trident)