Я заметил, что новый браузер Microsoft Edge переопределяет мои стили, когда он обнаруживает номера телефонов:
<span class="phone">(123)123-1234</span>
См. этот jsfiddle (должен быть открыт с использованием Microsoft Edge: P).
Этот вид вторгается в дизайн веб-сайта и довольно неприятен. Конечно, это похоже на черту преемника IE:/
Как я могу переопределить или отключить это, чтобы пользователи моего сайта не увидели его?
Вы можете избавиться от него, добавив этот метатег в заголовок ваших страниц.
<meta name="format-detection" content="telephone=no">
Документация Microsoft по этому тегу.
Надеюсь, что будет лучший способ отключить это глобально без вздутия страниц... Или еще лучше отключить эту функцию по умолчанию.
Вышеупомянутый ответ работает отлично, но отключает возможность щелчка называть номера телефонов (что является серьезной проблемой, если вы строите отзывчивый сайт). Я нашел лучшую работу, чтобы сделать номер телефона ссылкой. Пример:
<a href="tel:888-888-8888">(888) 888-8888</a>
Затем это позволит вам стилизовать "ссылку", но вы хотите, а стили "a" в вашем CSS переопределяют стили Edge и iPhone на номер телефона. Единственная проблема с этим заключается в том, что номер телефона является ссылкой для всех устройств, но я обнаружил, что это не является проблемой, поскольку почти у каждого устройства есть какая-то функция для включения или отключения функции для подключения.
Если вы не хотите отключать всю страницу, как предлагает выбранный ответ, вы можете добавить следующий атрибут к определенному тегу
<p x-ms-format-detection="none">
Я столкнулся с этой проблемой, но с немного другим вариантом использования: номер, который он выделяет, не является номером телефона, поэтому я не хочу специального форматирования.
Например, у вас может быть что-то вроде:
<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>