Usuń stylizację numeru telefonu w Microsoft Edge

Zauważyłem, że nowa przeglądarka Microsoft Edge zastępuje moje style, gdy wykryje numery telefonów:

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

Zobacz to jsfiddle (musi być otwarte za pomocą Microsoft Edge: P).

Ten rodzaj ingeruje w projekt strony internetowej i jest raczej nieprzyjemny. Jasne, wydaje się to cechą następcy IE: /

Jak mogę to zmienić lub wyłączyć, aby użytkownicy mojej witryny nie widzieli tego?

Możesz się go pozbyć, dodając ten metatag w nagłówku swoich stron.

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

Dokumentacja firmy Microsoft dotycząca tego znacznika .

Miejmy nadzieję, że będzie lepszy sposób na globalne wyłączenie tej funkcji bez nadmuchiwania stron ... Lub jeszcze lepiej, jeśli domyślnie wyłącz tę funkcję.

Jeśli nie chcesz wyłączać dla całej strony, jak sugeruje wybrana odpowiedź, możesz dodać następujący atrybut do określonego tagu

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

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

Powyższa odpowiedź działa idealnie, ale wyłącza możliwość korzystania z numerów telefonów typu „kliknij, aby połączyć” (co stanowi poważny problem, jeśli tworzysz responsywną witrynę). Znalazłem lepsze rozwiązanie, aby numer telefonu był łączem. Przykład:

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

Umożliwiłoby to wtedy stylizowanie „łącza” w dowolny sposób, a style „a” w CSS zastępują style Edge i iPhone w numerze telefonu. Jedynym problemem jest to, że sprawia, że ​​numer telefonu jest linkiem do wszystkich urządzeń, ale stwierdziłem, że nie stanowi to problemu, ponieważ prawie każde urządzenie ma jakąś funkcję lub aplikację typu „kliknij, aby połączyć”.

Spotkałem się z tym problemem, ale z nieco innym przypadkiem użycia: numer, który jest podświetlany, nie jest numerem telefonu, więc nie chcę żadnego specjalnego formatowania.

Na przykład możesz mieć coś takiego:

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

Dla mnie * Edge zamieni 08 2017 10się w link z numerem telefonu. Dzięki, Edge!

Odkryłem, że można to obejść, wstawiając niewidoczny inline-blockelement na środku łańcucha:

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

Nie mogę sprawdzić, czy to działa w przypadku Twojego numeru telefonu, ponieważ nie widzę wyróżnienia w żadnym przypadku. Konieczne może być przesunięcie pozycji przęsła.

Nawiasem mówiąc, fakt, że możesz to zrobić, jest jednym z wielu powodów, dla których nie powinieneś kopiować poleceń ze stron internetowych do terminala:

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>

* Myślę, że wyróżnianie liczb przez Edge jest regionalne. Twój jsfiddle nie jest wyróżniony dla mnie, ale jestem w Wielkiej Brytanii. Wydaje się, że tutaj wyróżnia się liczby zaczynające się od 0.