Eliminar el estilo del número de teléfono de Microsoft Edge

Noté que el nuevo navegador Microsoft Edge anula mis estilos cuando detecta números de teléfono:

<span class="phone">(123)123-1234</span>

Vea este jsfiddle (debe abrirse con Microsoft Edge: P).

Este tipo de inmiscuirse en el diseño del sitio web y es bastante desagradable. Seguro que parece un rasgo de un sucesor de IE: /

¿Cómo puedo anular o deshabilitar esto para que los usuarios de mi sitio web no lo vean?

Puede deshacerse de él agregando esta metaetiqueta en el encabezado de sus páginas.

<meta name="format-detection" content="telephone=no">

Documentación de Microsoft sobre esta etiqueta .

Con suerte, habrá una mejor manera de desactivar esto globalmente sin inflar las páginas ... O mejor aún, deshabilite esta función de forma predeterminada.

Si no desea deshabilitar para una página completa como sugiere la respuesta seleccionada, puede agregar el siguiente atributo a una etiqueta específica

<p x-ms-format-detection="none">

Referencia: https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/dev-guides/dn265018(v=vs.85)#controlling-phone-number-detection

La respuesta anterior funciona perfectamente, pero desactiva la capacidad de hacer clic para llamar a los números de teléfono (que es un problema importante si está creando un sitio receptivo). He encontrado una solución mejor para convertir el número de teléfono en un enlace. Ejemplo:

<a href="tel:888-888-8888">(888) 888-8888</a>

Esto le permitiría diseñar el "enlace" como desee, y los estilos "a" en su CSS anulan los estilos Edge y iPhone en el número de teléfono. El único problema con esto es que hace que el número de teléfono sea un enlace para todos los dispositivos, pero he descubierto que esto no es un problema, ya que casi todos los dispositivos tienen algún tipo de función o aplicación de clic para llamar incluida.

Me he enfrentado a este problema, pero con un caso de uso ligeramente diferente: el número que está resaltando no es un número de teléfono, por lo que no quiero ningún formato especial.

Por ejemplo, podría tener algo como:

<div>The current date/time: May 08 2017 10:44:58 GMT Daylight Time</div>

Para mí *, Edge se convertirá 08 2017 10en un enlace de número de teléfono. ¡Gracias, Edge!

Descubrí que puede evitar esto insertando un inline-blockelemento invisible en el medio de la cadena:

.notel{
  display:inline-block;
  height:0px;
  width:0px;
}

<span class="phone">(763)219-5222</span>
<div>The current date/time: May 08 2017 10:44:58 GMT Daylight Time</div>

<br>
<span class="phone">(763)2<span class="notel"></span>19-5222</span>
<div>The current date/time: May 08 2<span class="notel"></span>017 10:44:58 GMT Daylight Time</div>

No puedo ver si esto funciona para su número de teléfono, ya que no veo resaltado en ninguno de los casos. Es posible que deba empujar la posición del tramo.

Por cierto, el hecho de que pueda hacer esto es una de las muchas razones por las que no debe copiar los comandos de las páginas web a su terminal:

span{
display:inline-block;
height: 0px;
width: 0px;
overflow:hidden;
}
textarea{
  width: 300px;
  height:50px;
}

<div>echo "HELLO" <span>&& wreck this machine</span></div><div>echo "WORLD"</div>

<textarea ></textarea>
<div>
Select, copy and paste above commands into the textarea.
</div>

* Creo que el resaltado de números de Edge es regional. Tu jsfiddle no está resaltado para mí, pero estoy en el Reino Unido. Aquí parece resaltar los números que comienzan con 0.