Удалите стиль номера телефона Microsoft Edge

Question 1

Я заметил, что новый браузер Microsoft Edge переопределяет мои стили при обнаружении телефонных номеров:

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

См. Этот jsfiddle (должен быть открыт с помощью Microsoft Edge: P).

Этот вид вторгается в дизайн веб-сайта и довольно неприятен. Конечно, похоже на преемника IE: /

Как я могу переопределить или отключить это, чтобы пользователи моего веб-сайта не видели его?

Question 2

Вы можете избавиться от него, добавив этот метатег в заголовок своих страниц.

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

Документация Microsoft по этому тегу .

Надеюсь, будет лучший способ отключить эту функцию глобально без раздувания страниц ... Или еще лучше отключить эту функцию по умолчанию.

Question 3

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

<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

Question 4

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

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

Это позволит вам стилизовать «ссылку» по своему усмотрению, а стили «a» в вашем CSS переопределяют стили Edge и iPhone в номере телефона. Единственная проблема в том, что это делает телефонный номер ссылкой для всех устройств, но я обнаружил, что это не проблема, поскольку почти на каждом устройстве есть какая-то функция или приложение для вызова по щелчку.

Question 5

Я столкнулся с этой проблемой, но с немного другим вариантом использования: номер, который он выделяет, не является номером телефона, поэтому мне не нужно никакого специального форматирования.

Например, у вас может быть что-то вроде:

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