Entfernen Sie das Styling der Telefonnummer von Microsoft Edge

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?

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.

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

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.

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.