Rimuovi lo stile del numero di telefono di Microsoft Edge

95

Ho notato che il nuovo browser Microsoft Edge sovrascrive i miei stili quando rileva i numeri di telefono:

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

Vedi questo jsfiddle (deve essere aperto utilizzando Microsoft Edge: P).

Questo tipo di intrusione nel design del sito Web ed è piuttosto odioso. Sicuramente sembra una caratteristica di un successore di IE: /

Come posso ignorarlo o disabilitarlo in modo che gli utenti del mio sito web non lo vedano?

html css microsoft-edge

— karns
fonte

Spero che questo non sia effettivamente causato da malware ...

— karns

Controlla i componenti aggiuntivi (non hanno Edge), ma alcuni componenti aggiuntivi hanno causato quel comportamento in IE-s ...

— sinisake

7

Ho appena commentato oggi su Twitter: mobile.twitter.com/scunliffe/status/631484565492625409 almeno per quanto posso vedere per ora fino a quando Microsoft non annullerà questa pessima decisione che dovrai aggiungere <meta name="format-detection" content="telephone=no"/>a ogni singola pagina che devi eliminare di questo. :-(

— scunliffe

1

Viene applicato anche a numeri di latitudine / longitudine come 145.1231321

— behelit

1

Anche i formati numerici che vengono evidenziati variano con l'impostazione della regione ("Posizione di casa") del PC dell'utente, quindi questo influenzerà tutti gli utenti in modo diverso! Ciò significa che quando provi le tue pagine i tuoi utenti finali potrebbero effettivamente vedere qualcosa di diverso nonostante utilizzino lo stesso browser: docs.microsoft.com/en-us/previous-versions/windows/…

— SharpC

171

Puoi sbarazzartene aggiungendo questo meta tag nell'intestazione delle tue pagine.

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

Documentazione di Microsoft su questo tag .

Si spera che ci sarà un modo migliore per disattivarlo a livello globale senza gonfiare le pagine ... O meglio ancora disabilitare questa funzione per impostazione predefinita.

— scunliffe
fonte

Buona risposta! Potresti aggiungere un link alla documentazione relativa a questo, per favore?

— karns

8

Design stupido. Se qualcuno volesse farlo. Almeno, potresti consentire un attributo come "detect-phone = true" rendendolo opzionale, perché a volte non è necessario consentire alla tua webapp di farlo se non è previsto anche tu ...

— Miguel

59

Se non desideri disabilitare per un'intera pagina come suggerisce la risposta selezionata, puoi aggiungere il seguente attributo a un tag specifico

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

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

— maguy
fonte

9

So che questa è una risposta un po 'vecchia, ma per chiunque lo cerchi: ho dovuto aggiungerlo a un tag genitore (come il <div> che è un passo avanti rispetto all'etichetta o qualunque cosa tu stia usando per visualizzare il telefono numero).

— Dortimer

+1 sia alla risposta che al commento di Debasertron. Più avanti nel commento, sembra che sia necessario essere un genitore a livello di blocco: ho provato con un intervallo, che non ha funzionato, ma un div andava bene.

— Masala

31

La risposta di cui sopra funziona perfettamente, ma disabilita la possibilità di avere un clic per chiamare i numeri di telefono (che è un grosso problema se stai costruendo un sito reattivo). Ho trovato una soluzione migliore per rendere il numero di telefono un collegamento. Esempio:

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

Questo ti permetterebbe quindi di definire lo stile del "collegamento" come preferisci, e gli stili "a" nel tuo CSS sovrascrivono gli stili Edge e iPhone sul numero di telefono. L'unico problema è che rende il numero di telefono un collegamento per tutti i dispositivi, ma ho scoperto che non è un problema poiché quasi tutti i dispositivi hanno una sorta di funzione o app click to call inclusa.

— Cameron
fonte

1

Il miglior approccio ai miei occhi!

— conceptdeluxe

Anche se la domanda è "come disabilitare", dovrei essere d'accordo che questa sarebbe una risposta migliore se stai cercando di creare un sito reattivo pensando all'uso del telefono cellulare.

— JStevens

3

Ho affrontato questo problema, ma con un caso d'uso leggermente diverso: il numero che evidenzia non è un numero di telefono, quindi non voglio alcuna formattazione speciale.

Ad esempio potresti avere qualcosa come:

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

Per me *, Edge si convertirà 08 2017 10in un collegamento al numero di telefono. Grazie, Edge!

Ho scoperto che puoi aggirare questo problema inserendo un inline-blockelemento invisibile nel mezzo della stringa:

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

Espandi lo snippet

Non riesco a vedere se funziona per il tuo numero di telefono perché non vedo l'evidenziazione in entrambi i casi. Potrebbe essere necessario spostare il posizionamento della campata.

Per inciso, il fatto che tu possa farlo è uno dei tanti motivi per cui non dovresti copiare i comandi dalle pagine web e nel tuo terminale:

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>

Espandi lo snippet

* Penso che l'evidenziazione dei numeri da parte di Edge sia regionale. Il tuo jsfiddle non è evidenziato per me, ma sono nel Regno Unito. Qui sembra evidenziare i numeri che iniziano con 0.

— Jools
fonte