Entfernen Sie das Styling der Telefonnummer von Microsoft Edge

95

Ich habe festgestellt, dass der neue Microsoft Edge-Browser meine Stile überschreibt, wenn er Telefonnummern erkennt:

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

Siehe diese jsfiddle (muss mit Microsoft Edge: P geöffnet werden).

Diese Art von Eingriffen in das Design der Website ist ziemlich widerlich. Sicher scheint es ein Merkmal eines Nachfolgers des IE zu sein: /

Wie kann ich dies überschreiben oder deaktivieren, damit meine Website-Benutzer es nicht sehen?

Karns
quelle
Ich hoffe, dass dies nicht wirklich durch Malware verursacht wird ...
Karns
Überprüfen Sie Add-Ons (haben keine Edge), aber einige Add-Ons verursachten dieses Verhalten in IE-s ...
Sinisake
7
Ich habe dies erst heute auf Twitter kommentiert: mobile.twitter.com/scunliffe/status/631484565492625409, zumindest soweit ich das jetzt sehen kann, bis Microsoft diese schlechte Entscheidung rückgängig macht, die Sie <meta name="format-detection" content="telephone=no"/>jeder einzelnen Seite hinzufügen müssen, die Sie loswerden müssen von diesem. :-(
scunliffe
1
Es wird auch auf Breiten- / Längengrade wie 145.1231321 angewendet
siehe
1
Auch die hervorgehobenen Zahlenformate variieren mit der Regionseinstellung ("Heimatort") des PCs des Benutzers, sodass alle Benutzer unterschiedlich betroffen sind! Dies bedeutet, wenn Sie Ihre Seiten testen, sehen Ihre Endbenutzer möglicherweise tatsächlich etwas anderes, obwohl sie denselben Browser verwenden: docs.microsoft.com/en-us/previous-versions/windows/…
SharpC

Antworten:

171

Sie können es entfernen, indem Sie dieses Meta-Tag in die Kopfzeile Ihrer Seiten einfügen.

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

Microsoft-Dokumentation zu diesem Tag .

Hoffentlich gibt es eine bessere Möglichkeit, dies global zu deaktivieren, ohne Seiten aufzublähen ... Oder deaktivieren Sie diese Funktion besser standardmäßig.

scunliffe
quelle
Gute Antwort! Könnten Sie bitte einen Link zu den diesbezüglichen Dokumenten hinzufügen?
Karns
8
Dummes Design. Wenn jemand das machen möchte. Zumindest könnten Sie ein Attribut wie "detect-phone = true" zulassen, das es optional macht, da es manchmal nicht erforderlich ist, dass Ihre Webanwendung dies zulässt, wenn dies nicht beabsichtigt ist ...
Miguel
59

Wenn Sie nicht für eine ganze Seite deaktivieren möchten, wie in der ausgewählten Antwort vorgeschlagen, können Sie einem bestimmten Tag das folgende Attribut hinzufügen

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

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

maguy
quelle
9
Ich weiß, dass dies eine alte Antwort ist, aber für alle, die dies nachschlagen: Ich musste dies einem übergeordneten Tag hinzufügen (wie dem <div>, das einen Schritt weiter vom Etikett entfernt ist, oder was auch immer Sie zum Anzeigen des Telefons verwenden Nummer).
Dortimer
+1 auf die Antwort und den Kommentar von Debasertron. Weiter im Kommentar scheint es ein Elternteil auf Blockebene zu sein - ich habe es mit einer Spanne versucht, die nicht funktioniert hat, aber ein Div war in Ordnung.
Masala
31

Die obige Antwort funktioniert einwandfrei, deaktiviert jedoch die Möglichkeit, Click-to-Call-Telefonnummern anzurufen (was ein großes Problem darstellt, wenn Sie eine reaktionsfähige Site erstellen). Ich habe eine bessere Lösung gefunden, um die Telefonnummer zu einem Link zu machen. Beispiel:

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

Auf diese Weise können Sie den "Link" so gestalten, wie Sie möchten, und die "a" -Stile in Ihrem CSS überschreiben die Edge- und iPhone-Stile auf der Telefonnummer. Das einzige Problem dabei ist, dass die Telefonnummer ein Link für alle Geräte ist, aber ich habe festgestellt, dass dies kein Problem ist, da fast jedes Gerät eine Art Click-to-Call-Funktion oder App enthält.

Cameron
quelle
1
Der beste Ansatz in meinen Augen!
Conceptdeluxe
Obwohl die Frage "Deaktivieren" lautet, muss ich zustimmen, dass dies eine bessere Antwort ist, wenn Sie versuchen, eine reaktionsfähige Website für die Verwendung von Mobiltelefonen zu erstellen.
JStevens
3

Ich bin mit diesem Problem konfrontiert, aber mit einem etwas anderen Anwendungsfall: Die hervorgehobene Nummer ist keine Telefonnummer, daher möchte ich keine spezielle Formatierung.

Zum Beispiel könnten Sie etwas haben wie:

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

Für mich * wird Edge 08 2017 10in einen Telefonnummernlink umgewandelt. Danke, Edge!

Ich habe festgestellt, dass Sie dies umgehen können, indem Sie ein unsichtbares inline-blockElement in die Mitte der Zeichenfolge einfügen :

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

Ich kann nicht sehen, ob dies für Ihre Telefonnummer funktioniert, da ich in beiden Fällen keine Hervorhebung sehe. Möglicherweise müssen Sie die Positionierung der Spanne verschieben.

Die Tatsache, dass Sie dies tun können, ist übrigens einer der vielen Gründe, warum Sie Befehle nicht von Webseiten in Ihr Terminal kopieren sollten:

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>

* Ich denke, Edges Hervorhebung von Zahlen ist regional. Ihre jsfiddle ist für mich nicht hervorgehoben, aber ich bin in Großbritannien. Hier scheinen Zahlen hervorzuheben, die mit 0 beginnen.

Jools
quelle