Remove Microsoft Edge's phone number styling

Question

I noticed that the new Microsoft Edge browser overrides my styles when it detects phone numbers:

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

See this jsfiddle (must be opened using Microsoft Edge :P).

This sort of intrudes upon the design of the website, and is rather obnoxious. Sure seems like a trait of a successor to IE :/

How can I override or disable this so my website users will not see it?

Answer 1

You can get rid of it by adding this meta tag in the header of your pages.

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

Microsoft's documentation on this tag.

Hopefully there will be a better way to turn this off globally without bloating pages... Or better yet disable this feature by default.

Answer 2

If you don't want to disable for an entire page as the selected answer suggests, you can add the following attribute to a specific tag

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

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