Supprimer le style du 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:

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

Voir ce jsfiddle (doit être ouvert à l'aide de Microsoft Edge: P).

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

Comment puis-je annuler ou désactiver cette option afin 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.

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

Documentation de Microsoft sur cette balise .

Espérons qu'il y aura un meilleur moyen de désactiver cette fonctionnalité globalement sans gonfler les pages ... Ou mieux encore désactiver 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 ajouter l'attribut suivant à une balise spécifique

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

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 moyen de faire du numéro de téléphone un lien. Exemple:

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

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 du numéro de téléphone. Le seul problème avec cela est que cela fait du numéro de téléphone un lien pour tous les appareils, mais j'ai trouvé que ce n'était pas un problème car presque tous les appareils ont une sorte de fonctionnalité ou d'application Cliquer pour appeler incluse.

J'ai rencontré ce problème, mais avec un cas d'utilisation légèrement différent: le numéro qu'il met en évidence n'est pas un numéro de téléphone, donc je ne veux pas de formatage spécial.

Par exemple, vous pourriez avoir quelque chose comme:

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

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 un inline-blockélément invisible au milieu de la chaîne:

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

Je ne vois pas si cela fonctionne pour votre numéro de téléphone car je ne vois pas de surlignage dans les deux cas. Vous devrez peut-être pousser le positionnement de la travée.

Incidemment, le fait que vous puissiez le faire est l'une des nombreuses raisons pour lesquelles vous ne devriez pas copier les commandes hors des pages Web et dans votre 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>

* Je pense que la mise en évidence des nombres par Edge est régionale. Votre jsfiddle n'est pas mis en évidence pour moi, mais je suis au Royaume-Uni. Voici semble mettre en évidence les nombres commençant par 0.