Remova o estilo do número de telefone do Microsoft Edge

Percebi que o novo navegador Microsoft Edge substitui meus estilos ao detectar números de telefone:

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

Vejo este jsfiddle (deve ser aberto usando Microsoft Edge: P).

Esse tipo de invasão interfere no design do site e é bastante desagradável. Claro que parece uma característica de um sucessor do IE: /

Como posso substituir ou desabilitar isso para que os usuários do meu site não vejam?

Você pode se livrar disso adicionando esta metatag no cabeçalho de suas páginas.

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

Documentação da Microsoft nesta tag .

Esperançosamente, haverá uma maneira melhor de desligar isso globalmente sem aumentar as páginas ... Ou melhor ainda, desabilitar esse recurso por padrão.

Se você não deseja desabilitar para uma página inteira como a resposta selecionada sugere, você pode adicionar o seguinte atributo a uma tag específica

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

Referência: https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/dev-guides/dn265018(v=vs.85)#controlling-phone-number-detection

A resposta acima funciona perfeitamente, mas desativa a capacidade de clicar para ligar para números de telefone (o que é um grande problema se você estiver construindo um site responsivo). Eu encontrei uma solução melhor para tornar o número de telefone um link. Exemplo:

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

Isso permitiria que você estilizasse o "link" como quiser, e os estilos "a" em seu CSS substituíam os estilos Edge e iPhone no número de telefone. O único problema com isso é que torna o número de telefone um link para todos os dispositivos, mas descobri que isso não é um problema, pois quase todos os dispositivos têm algum tipo de recurso ou aplicativo clique para ligar incluído.

Enfrentei esse problema, mas com um caso de uso ligeiramente diferente: o número que está destacando não é um número de telefone, então não quero nenhuma formatação especial.

Por exemplo, você pode ter algo como:

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

Para mim *, o Edge se converterá 08 2017 10em um link de número de telefone. Obrigado, Edge!

Descobri que você pode contornar isso inserindo um inline-blockelemento invisível no meio da string:

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

Não consigo ver se isso funciona para o seu número de telefone, pois não vejo destaque em nenhum dos casos. Você pode precisar ajustar o posicionamento da extensão.

A propósito, o fato de você poder fazer isso é um dos muitos motivos pelos quais você não deve copiar comandos de páginas da web para o seu terminal:

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>

* Acho que o destaque de números do Edge é regional. Seu jsfiddle não está destacado para mim, mas estou no Reino Unido. Aqui parece destacar os números que começam com 0.