Удаление стиля телефона Microsoft Edge

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

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

См. этот jsfiddle (должен быть открыт с использованием Microsoft Edge: P).

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

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

Ответы

Ответ 1

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

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

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

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

Ответ 2

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

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

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

Ответ 3

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

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

Ответ 4

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

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

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

Для меня *, Edge преобразует 08 2017 10 в ссылку номера телефона. Спасибо, Edge!

Я обнаружил, что вы можете обойти это, вставив невидимый элемент 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>