Microsoft Edge'in telefon numarası stilini kaldırın

Question 1

Yeni Microsoft Edge tarayıcısının telefon numaralarını algıladığında stillerimi geçersiz kıldığını fark ettim:

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

Bu jsfiddle'a bakın (Microsoft Edge: P kullanılarak açılmalıdır).

Bu, web sitesinin tasarımına müdahale eder ve oldukça iğrençtir. Elbette, IE'nin halefinin bir özelliği gibi görünüyor: /

Web sitesi kullanıcılarımın görmemesi için bunu nasıl geçersiz kılabilir veya devre dışı bırakabilirim?

Question 2

Sayfalarınızın başlığına bu meta etiketi ekleyerek kurtulabilirsiniz.

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

Microsoft'un bu etiketle ilgili belgeleri .

Umarım sayfaları şişkinleştirmeden bunu global olarak kapatmanın daha iyi bir yolu olacaktır ... Veya daha iyisi bu özelliği varsayılan olarak devre dışı bırakın.

Question 3

Seçilen cevabın önerdiği gibi tüm bir sayfa için devre dışı bırakmak istemiyorsanız, aşağıdaki özniteliği belirli bir etikete ekleyebilirsiniz.

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

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

Question 4

Yukarıdaki cevap mükemmel bir şekilde çalışıyor, ancak telefon numaralarını aramak için tıkla özelliğini devre dışı bırakır (bu, duyarlı bir site oluşturuyorsanız büyük bir sorundur). Telefon numarasını bir bağlantı haline getirmek için daha iyi bir çalışma buldum. Misal:

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

Bu, daha sonra "bağlantı" yı istediğiniz gibi biçimlendirmenize izin verir ve CSS'nizdeki "a" stilleri, telefon numarasındaki Edge ve iPhone stillerini geçersiz kılar. Bununla ilgili tek sorun, telefon numarasını tüm cihazlar için bir bağlantı haline getirmesidir, ancak bunun bir sorun olmadığını gördüm, çünkü hemen hemen her cihazda bir tür aramak için tıklayın özelliği veya uygulama dahil.

Question 5

Bu sorunla karşılaştım, ancak biraz farklı bir kullanım örneğiyle: Vurguladığı numara bir telefon numarası değil, bu yüzden özel bir biçimlendirme istemiyorum.

Örneğin, aşağıdaki gibi bir şeye sahip olabilirsiniz:

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

Benim için *, Edge 08 2017 10bir telefon numarası bağlantısına dönüşecek. Teşekkürler Edge!

Görünmez inline-blocköğeyi dizenin ortasına ekleyerek bunun üstesinden gelebileceğinizi buldum :

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

Snippet'i genişlet

Her iki durumda da vurgulamayı görmediğim için bunun telefon numaranız için işe yarayıp yaramadığını göremiyorum. Açıklığın konumunu dürtmeniz gerekebilir.

Bu arada, bunu yapabilmeniz gerçeği, komutları web sayfalarından terminalinize kopyalamamanız için birçok nedenden biridir:

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>

Snippet'i genişlet

* Edge'in sayıları vurgulamasının bölgesel olduğunu düşünüyorum. Jsfiddle'ınız benim için vurgulanmamış, ama ben Birleşik Krallık'tayım. İşte 0 ile başlayan sayıları vurguluyor gibi görünüyor.