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

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

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

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

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

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

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

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

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

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

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

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