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

95

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?

html css microsoft-edge

— Karns
fonte

Espero que isso não seja realmente causado por malware ...

— karns

Verifique os add-ons (não tem Edge), mas alguns add-ons causaram esse comportamento no IE-s ...

— sinisake

7

Eu apenas hoje comentei sobre isso no Twitter: mobile.twitter.com/scunliffe/status/631484565492625409 pelo menos pelo que posso ver por agora, até que a Microsoft reverta essa má decisão que você precisará adicionar <meta name="format-detection" content="telephone=no"/>a cada página que você tem que se livrar disto. :-(

— scunliffe

1

Também é aplicado a números de latitude / longitude como 145.1231321

— behelit

1

Além disso, os formatos de número que são destacados variam de acordo com a configuração da região ("Local residencial") do PC do usuário, portanto, isso afetará todos os usuários de forma diferente! Isso significa que quando você testa suas páginas, seus usuários finais podem realmente ver algo diferente, apesar de usar o mesmo navegador: docs.microsoft.com/en-us/previous-versions/windows/…

— SharpC

171

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.

— Scunliffe
fonte

Boa resposta! Você poderia adicionar um link para documentos relacionados a isso, por favor?

— karns

8

Design estúpido. Se alguém quiser fazer isso. Pelo menos, você poderia permitir um atributo como "detect-phone = true" tornando-o opcional, porque às vezes não há necessidade de permitir que seu webapp faça isso se também não for pretendido ...

— Miguel

59

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

— maguy
fonte

9

Eu sei que esta é uma resposta um pouco antiga, mas para quem está procurando isso: eu tive que adicionar isso a uma tag pai (como o <div> que é um avanço em relação ao rótulo ou o que quer que você esteja usando para exibir o telefone número).

— Dortimer 01 de

+1 para a resposta e o comentário de Debasertron. Mais adiante no comentário, parece que precisa ser um pai em nível de bloco - tentei com um span, que não funcionou, mas um div funcionou.

— Masala

31

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.

— cameron
fonte

1

A melhor abordagem aos meus olhos!

— conceptdeluxe de

Embora a questão seja "como desativar", devo concordar que essa seria uma resposta melhor se você estiver tentando criar um site responsivo com o uso de telefones celulares em mente.

— JStevens

3

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>

Expandir trecho

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>

Expandir trecho

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

— Jools
fonte