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

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

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

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

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

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

4 51
html css microsoft-edge

4 ответа:

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

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

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

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

110

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

<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

31

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

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

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

24

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

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

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

для меня*, край преобразует 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>

*Я думаю, что выделение краев чисел является региональным. Ваш jsfiddle не выделен для меня, но я нахожусь в Великобритании. Вот, кажется, чтобы выделить числа, которые начинаются с 0.

1