web-dev-qa-db-fra.com

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:

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

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

Ce type d'ingérence dans la conception du site Web, et est plutôt odieux. Bien sûr, cela ressemble à un trait de caractère du successeur de IE: /

Comment puis-je remplacer ou désactiver ceci afin que les utilisateurs de mon site Web ne le voient pas?

htmlcssmicrosoft-edge
84
karns

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é au niveau mondial sans faire de blagues aux pages ... ou encore de désactiver cette fonctionnalité par défaut.

146
scunliffe

Si vous ne souhaitez pas désactiver 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) # control-phone -numéro-détection

49
maguy

La réponse ci-dessus fonctionne parfaitement, mais désactive la possibilité d'avoir un clic pour appeler des numéros de téléphone (ce qui constitue un problème majeur si vous créez un site responsive). J'ai trouvé un meilleur moyen de transformer le numéro de téléphone en lien. Exemple:

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

Cela vous permettrait ensuite de styler 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 le numéro de téléphone est 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 fonction ou application incluse pour appeler.

30
cameron

J'ai rencontré ce problème, mais avec un cas d'utilisation légèrement différent: le numéro qu'il met en surbrillance 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:

<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 de numéro de téléphone. Merci Edge!

J'ai découvert que vous pouvez contourner ce problème en insérant un élément invisible inline-block 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 surbrillance dans les deux cas. Vous devrez peut-être décaler 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 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 les chiffres mis en avant par Edge sont régionaux. Votre jsfiddle n'est pas mis en évidence pour moi, mais je suis au Royaume-Uni. Voici semble mettre en évidence les nombres qui commencent par 0.

2
Jools