Windows 10's edge browser seems to detect phone numbers even if there's no phone app installed on the system.
It formats the phone number in blue with an underline even if it's just in the plain text somewhere (ugly on some backgrounds), moreover it detects e.g. VAT numbers as if they were phone numbers.
So how do we control it as webmasters to:
how it renders the detected stuff (I suppose MSFT invented their very own CSS selector for this stuff?)
how do we turn the detection off
Preferably with something just targeting that browser and not risk messing up things for others or adding non-standard things to otherwise valid code.
EDIT:
The suggested way to turn detection off based on the way it is done in IE11 for windows phones does not work in all of my tests. The meta tag fails and the non-standard html attribute does seem to work.
I've looked at the inspect thing in edge and it seems to me the computed CSS for those detected items is what one would expect to see there if it were not detected (i.e. the computed CSS is the normal color and no underline), suggesting little chance of controlling how it's rendered.
EDIT:
test case 1: meta tag (fails)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta charset="UTF-8" />
<!-- test -->
<meta name="format-detection" content="telephone=no" />
</head>
<body>
<p>text VAT BE 0123.456.789 text </p>
<p>text +32 11 222 333 text</p>
</body>
</html>Test case 2: non-standard html attribute (works)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<p x-ms-format-detection="none">text VAT BE 0123.456.789 text </p>
<p>text +32 11 222 333 text</p>
</body>
</html>Apparently phone number detection was introduced in Internet Explorer 11, but not on desktops.
Here are ways to control it, taken from this MS article: Phone number format recognition
- To disable the behavior for an element (and its child elements), set the
x-ms-format-detectionattribute to "none". - To disable the behavior for a webpage, use the meta element:
<meta name="format-detection" content="telephone=no"/>
To enable the behavior for an element (and its child elements), set the
x-ms-format-detectionattribute to "phone" or "all".To selectively control the behavior using JavaScript, use
setAttributeto change the value of thex-ms-format-detectionattribute of the associate element or its parent. (Note that this needs to be done before the element or the parent is rendered in the DOM; dynamic changes are not supported.)
If I understand the article correctly, if phone detection is disabled at the browser level, the x-ms-format-detection attribute (or the meta tag) will be ignored.
Using the x-ms-format-detection="none" worked for me. However I had to add it to the parent element.
For example my phone number was wrapped in a span class so I had to add it to parent div above. Adding directly to the span tag didn't fix the issue on edge for me.
Hope that helps
I've found a way that works perfect for me, and it consist on change the tag where you have the number by an "a" (anchor) instead of any one you may have, with no need of href. Then, set text-underline to none and color to inherit. That's all.
If you add x-ms-format-detection="none" to the body tag it will be applied to the whole page.
<body x-ms-format-detection="none">
This should be a comment, but I dont have the reputation yet, sorry!
Building on good the previous answer by jfrej and subsequent comment by Ben Hillier, I'd like to point out that x-ms-format-detection="none" can work on a span element, but not with de default display: inline, rather style your span with a display: inline-block.
Similarly using <div x-ms-format-detection="none" style="display: inline">1234567890</div> will not work either.
来源：https://stackoverflow.com/questions/31718796/taming-the-automatic-telephone-number-thing-in-the-windows-10-edge-browser