Hapus gaya nomor telepon Microsoft Edge

Saya perhatikan bahwa browser Microsoft Edge baru menimpa gaya saya saat mendeteksi nomor telepon:

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

Lihat jsfiddle ini (harus dibuka menggunakan Microsoft Edge: P).

Hal ini mengganggu desain situs web, dan agak menjengkelkan. Tentu tampak seperti sifat penerus IE: /

Bagaimana cara mengganti atau menonaktifkan ini sehingga pengguna situs web saya tidak akan melihatnya?

Anda dapat menghilangkannya dengan menambahkan tag meta ini di header halaman Anda.

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

Dokumentasi Microsoft tentang tag ini .

Semoga ada cara yang lebih baik untuk mematikan ini secara global tanpa membengkak halaman ... Atau lebih baik lagi menonaktifkan fitur ini secara default.

Jika Anda tidak ingin menonaktifkan untuk seluruh halaman seperti yang disarankan oleh jawaban yang dipilih, Anda dapat menambahkan atribut berikut ke tag tertentu

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

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

Jawaban di atas berfungsi dengan sempurna, tetapi menonaktifkan kemampuan untuk memiliki klik untuk menelepon nomor telepon (yang merupakan masalah utama jika Anda membangun situs yang responsif). Saya telah menemukan cara yang lebih baik untuk menjadikan nomor telepon sebagai tautan. Contoh:

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

Ini kemudian akan memungkinkan Anda untuk memberi gaya "tautan" sesuka Anda, dan gaya "a" di CSS Anda menimpa gaya Edge dan iPhone pada nomor telepon. Satu-satunya masalah dengan ini adalah membuat nomor telepon menjadi tautan untuk semua perangkat, tetapi saya menemukan ini tidak menjadi masalah karena hampir setiap perangkat memiliki semacam fitur atau aplikasi klik untuk menelepon yang disertakan.

Saya telah menghadapi masalah ini, tetapi dengan kasus penggunaan yang sedikit berbeda: Nomor yang disoroti bukanlah nomor telepon, jadi saya tidak menginginkan pemformatan khusus.

Misalnya, Anda mungkin memiliki sesuatu seperti:

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

Bagi saya *, Edge akan diubah 08 2017 10menjadi tautan nomor telepon. Terima kasih, Edge!

Saya telah menemukan bahwa Anda bisa menyiasati ini dengan memasukkan inline-blockelemen tak terlihat ke tengah string:

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

Saya tidak dapat melihat apakah ini berfungsi untuk nomor telepon Anda karena saya tidak melihat sorotan dalam kedua kasus tersebut. Anda mungkin perlu mendorong pemosisian span.

Kebetulan, fakta bahwa Anda dapat melakukan ini adalah salah satu dari banyak alasan Anda tidak boleh menyalin perintah dari halaman web dan ke terminal Anda:

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>

* Saya pikir penyorotan angka Edge bersifat regional. Jsfiddle Anda tidak disorot untuk saya, tapi saya di Inggris. Ini sepertinya menyoroti angka yang dimulai dengan 0.