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

95

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?

html css microsoft-edge

— karns
fuente

Espero que esto no es realmente causado por el malware ...

— Karns

Verifique los complementos (no tiene Edge), pero algunos complementos causaron ese comportamiento en IE-s ...

— sinisake

7

Acabo de comentar esto hoy en Twitter: mobile.twitter.com/scunliffe/status/631484565492625409 al menos por lo que puedo ver por ahora hasta que Microsoft revierta esta mala decisión que tendrá que agregar <meta name="format-detection" content="telephone=no"/>a cada página que tenga para deshacerse de esta. :-(

— scunliffe

1

También se aplica a números de latitud / longitud como 145.1231321

— behelit

1

Además, los formatos numéricos que se resaltan varían con la configuración de la región ("Ubicación de casa") de la PC del usuario, por lo que esto afectará a todos los usuarios de manera diferente. Esto significa que cuando prueba sus páginas, sus usuarios finales pueden ver algo diferente a pesar de usar el mismo navegador: docs.microsoft.com/en-us/previous-versions/windows/…

— SharpC

171

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.

— scunliffe
fuente

¡Buena respuesta! ¿Podría agregar un vínculo a los documentos relacionados con esto, por favor?

— karns

8

Diseño estúpido. Si alguien quisiera hacer eso. Al menos, podría permitir un atributo como "detect-phone = true" haciéndolo opcional, porque a veces no es necesario permitir que su aplicación web haga eso si no está previsto también ...

— Miguel

59

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

— maguy
fuente

9

Sé que esta es una respuesta un poco antigua, pero para cualquiera que busque esto: tuve que agregar esto a una etiqueta principal (como <div> que es un paso adelante de la etiqueta o lo que sea que esté usando para mostrar el teléfono número).

— Dortimer

+1 tanto a la respuesta como al comentario de Debasertron. Más adelante en el comentario, parece que debe ser un padre a nivel de bloque; lo intenté con un intervalo, que no funcionó, pero un div estaba bien.

— Masala

31

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.

— Cameron
fuente

1

¡El mejor enfoque a mis ojos!

— conceptdeluxe

Aunque la pregunta es "cómo deshabilitar", debo estar de acuerdo en que esta sería una mejor respuesta si está intentando crear un sitio receptivo con el uso de teléfonos móviles en mente.

— JStevens

3

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>

Expandir fragmento

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>

Expandir fragmento

* 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.

— Jools
fuente