Microsoft Edge browser for Windows 10 has many features, but one of them may cause problems. This feature overrides the original style of telephone numbers with its own style. It also automatically adds clickable links, sometimes even to data not representing phone numbers. I encountered this issue recently and this article will show the solution to the problem.
I was adding an article to the website I’m maintaining and among other things it contained a program schedule using a dot as the separator between an hour and minute (for example 11.00 – 11.30). I noticed that in Edge browser, some of this information was modified into clickable links as shown below:
The added hyperlinks were not visible in the page source, so the Edge was not modifying the DOM. When that underlined link was clicked, a message window with the title "You'll need a new app to open this tel" showed up, asking me, which app to use:
If I clicked on “Look for an app in the Store”, the App Store offered me a bunch of phone-related apps, like Lync, Skype Translator, MobileVoIP, GVoice, and so on. It seems, the Edge Browser wrongly detects the hour schedule as a phone number.
Even with real phone numbers on a page, this feature was causing issues as the Edge browser was overriding the CSS styling of those phone numbers, and by doing that it interferes with the design of the website.
Luckily, there are a few ways to solve this problem. After applying any of the solutions below, those hourly schedule information along with the styles of real telephone numbers are left alone.
Solution 1 - Adding specific Meta tag inside the head tag
One way to stop the Microsoft Edge browser from creating phone number links and prevent overrides of website's CSS styling is to add the following line inside the <head>
tag.
<meta name="format-detection" content="telephone=no"/>
We use this solution when we want to remove this behavior all together from a webpage.
Using WordPress Plugin
If you are using WordPress, you can use this WordPress plugin. The plugin will add the same line as shown above without the need to manually change the theme files.
Solution 2 - Adding attribute to the element
When we need to disable this phone number detection only on a specific element, we can use x-ms-format-detection
attribute, like so:
<p x-ms-format-detection="none">11.30 - 11.45</p>
This solution becomes handy when we want to remove the styling only on elements that are not phone numbers, like in the above example, which contains a schedule.
Solution 3 - Using JavaScript
If we need to disable this behavior only when some condition is met, we can use JavaScript to achieve that by adding x-ms-format-detection
attributes to elements. For example, commentator davehorror mentioned a behavior that would leave the styles alone for mobile devices, but made them disable for the desktop. This can be achieved with the following code:
if (window.matchMedia('(min-width: 1024px)').matches) {
var e = document.getElementsByClassName("phone");
for (i = 0; i < e.length; i++)
e[i].setAttribute("x-ms-format-detection", "none");
}
So if we have the following HTML code:
Phone numbers would keep the automatic styling as long as the viewport is smaller than 1024px, otherwise, x-ms-format-detection="none"
attribute is added to every element with phone class.
In the case for the schedule (first <p> on line 1), we don't want to use automatic styling at all, so we use Solution 2 to that element by adding x-ms-format-detection
attribute with none value.
Check the working demo of the above code on CodePen.
Conclusion
One of the features of Edge browser and Internet Explorer 11 can cause unnecessary problems when it wrongly recognizes various numerical data like phone numbers, creating clickable links, and overriding styles for real telephone numbers. In this article, we solved this problem in 3 ways: by adding a <meta> tag, adding an attribute to the elements or by using JavaScript.
If you found this article useful, take a moment to drop a comment or share it on social networks.
Georg
March 7, 2016You pointed me in the Right direction already, thanks!
That's what I found to work for me - applied as an attribute to an element inside which phone numbers should not automatically be detected:
x-ms-format-detection="none"
Roger
March 22, 2016It works! Thank you
davehorror
October 26, 2016Using this Meta tag disables the ability for the user to click the phone number at all. If you are building a responsive site this feature is great to have at a mobile level. I just don't want their awful styles, nor do I want it at desktop level. Any suggestions?
admin
October 26, 2016Hi,
I added JavaScript solution, which can be used to mimic "Media Query" that would disable styles when large enough viewport is used by adding
x-ms-format-detection="none"
attribute to elements with specific class.sabien
April 7, 2017Great it works, thank you!!!
Bjørn Erik Sandbakk
July 15, 2017A perfect solution. Thanks. 🙂
Jose Neto
October 17, 2017Your solutions address only specific pages. As a user, I want to disable this function in my Edge browser, for all pages. Do you know how to do it? Thanks!
admin
October 19, 2017There seems to be an Administrative Template Policy Settings for this option, check this link for IE11. I wasn't able to try it on my Win7 Home, since you can only edit Group Policy with Professional Edition of Windows.
Katw
July 4, 2018Great article.
For anyone implementing the JS version... the function must load and execute BEFORE the DOM finishes loading.
I couldn't work out why the class wasn't changed when the condition was TRUE; then found a note on MS-MSDN page reminding 'us' to run the code before "parent is rendered in the DOM as dynamic changes are not supported".
INFO HERE: https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/dev-guides/dn265018(v=vs.85)
In plain language this means load in header without document.ready function.
Geoff
August 29, 2018Perfect solution and very well explained. Thank you.
sai kumar
August 13, 2019it is not working for span tag
Brant
January 1, 2020Worked well for Squarespace code injection across entire site. Problem for me was mobile Safari on an iPhone (and who knows what else, but this is where I found the problem)—THANK YOU
AJ Clarke
February 6, 2020Hi,
For those using WordPress you can use our plugin: https://wordpress.org/plugins/disable-browser-telephone-format-detection/
admin
February 8, 2020Hi,
Thanks for this. I have now updated the article to also include the information about this plugin.
Dean
April 23, 2023Solved my issue! However, I don't know how it was hacked? It happens in Edge when the phone # on my website is clicked and the google voice app is chosen it use to call a competitor phone # but the plugin fixsed that. Ok great! But I'm wondering how they hacked my website or hacked my edge browser on my computer?