Видаліть стиль телефонного номера Microsoft Edge

Я помітив, що новий браузер Microsoft Edge замінює мої стилі, коли виявляє телефонні номери:

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

Дивіться цей jsfiddle (його потрібно відкрити за допомогою Microsoft Edge: P).

Цей тип втручається у дизайн веб-сайту і досить неприємний. Звичайно, це здається рисою наступника IE: /

Як я можу замінити або вимкнути це, щоб користувачі мого веб-сайту не бачили цього?

Ви можете позбутися цього, додавши цей мета-тег у заголовок своїх сторінок.

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

Документація корпорації Майкрософт щодо цього тегу .

Сподіваємось, буде кращий спосіб вимкнути це глобально, не здуваючи сторінки ... Або ще краще вимкнути цю функцію за замовчуванням.

Якщо ви не хочете вимикати цілу сторінку, як передбачає обрана відповідь, ви можете додати наступний атрибут до певного тегу

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

Посилання: https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/dev-guides/dn265018(v=vs.85)#controlling-phone-number-detection

Наведена вище відповідь працює чудово, але відключає можливість телефонувати за номером телефону (що є головною проблемою, якщо ви створюєте адаптивний сайт). Я знайшов кращу роботу, щоб зробити номер телефону посиланням. Приклад:

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

Тоді це дозволить вам стилізувати "посилання" як завгодно, а стилі "a" у вашому CSS замінюють стилі Edge та iPhone на телефонному номері. Єдина проблема в тому, що телефонний номер робить посиланням для всіх пристроїв, але я виявив, що це не проблема, оскільки майже на кожному пристрої є якась функція або додаток для дзвінка.

Я зіткнувся з цією проблемою, але з дещо іншим варіантом використання: номер, який він виділяє, не є номером телефону, тому я не хочу особливого форматування.

Наприклад, у вас може бути щось на зразок:

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

Для мене * Edge конвертує 08 2017 10 на посилання на номер телефону. Дякую, Краю!

Я виявив, що ви можете обійти це, вставивши невидимий inline-blockелемент у середину рядка:

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

Я не можу зрозуміти, чи це працює для вашого номера телефону, оскільки я не бачу виділення в обох випадках. Можливо, вам доведеться підштовхнути позиціонування прольоту.

До речі, той факт, що ви можете це зробити, є однією з багатьох причин, чому ви не повинні копіювати команди з веб-сторінок та у свій термінал:

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>

* Я думаю, що виділення номерів Edge є регіональним. Ваш jsfiddle для мене не виділений, але я перебуваю у Великобританії. Ось, здається, виділяють цифри, які починаються з 0.