Supprimer le style de numéro de téléphone de Microsoft Edge

J’ai remarqué que le nouveau navigateur Microsoft Edge remplace mes styles lorsqu’il détecte des numéros de téléphone:

(123)123-1234 

Voir ce jsfiddle (doit être ouvert en utilisant Microsoft Edge: P).

Ce genre d’intrusion dans la conception du site Web est plutôt odieux. Bien sûr semble être un trait de successeur à IE: /

Comment puis-je annuler ou désactiver cette opération pour que les utilisateurs de mon site Web ne le voient pas?

Vous pouvez vous en débarrasser en ajoutant cette balise meta dans l’en-tête de vos pages.

  

La documentation de Microsoft sur cette balise

Si tout va bien, il y aura un meilleur moyen de désactiver cette fonctionnalité globalement sans gonflement des pages … Ou mieux encore, désactivez cette fonctionnalité par défaut.

Si vous ne souhaitez pas désactiver pour une page entière, comme le suggère la réponse sélectionnée, vous pouvez append l’atsortingbut suivant à une balise spécifique

 

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

La réponse ci-dessus fonctionne parfaitement, mais désactive la possibilité de cliquer pour appeler des numéros de téléphone (ce qui est un problème majeur si vous créez un site réactif). J’ai trouvé un meilleur travail pour faire du numéro de téléphone un lien. Exemple:

 (888) 888-8888 

Cela vous permettrait alors de styliser le “lien” comme vous le souhaitez, et les styles “a” de votre CSS remplacent les styles Edge et iPhone sur le numéro de téléphone. Le seul problème avec cela est que le numéro de téléphone est un lien pour tous les appareils, mais j’ai trouvé que cela ne posait pas de problème car presque tous les appareils ont une fonction de clic ou une application incluse.

J’ai été confronté à ce problème, mais avec un cas d’utilisation légèrement différent: le nombre mis en évidence n’est pas un numéro de téléphone, je ne souhaite donc pas de formatage spécial.

Par exemple, vous pourriez avoir quelque chose comme:

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

Pour moi, Edge convertira 08 2017 10 en un lien vers un numéro de téléphone. Merci Edge!

J’ai trouvé que vous pouvez contourner ce problème en insérant inline-block élément invisible inline-block au milieu de la chaîne:

 .notel{ display:inline-block; height:0px; width:0px; } 
 (763)219-5222 
The current date/time: May 08 2017 10:44:58 GMT Daylight Time

(763)219-5222
The current date/time: May 08 2017 10:44:58 GMT Daylight Time