删除 MicrosoftEdge 的电话号码样式

我注意到新的 MicrosoftEdge 浏览器在检测电话号码时会覆盖我的样式:

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

请参见 这把小提琴(必须使用 MicrosoftEdge: P 打开)。

这种做法侵犯了网站的设计,令人相当反感。看起来像是 IE 的继任者的一个特征:/

我如何覆盖或禁用此,使我的网站用户不会看到它?

71020 次浏览

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.

The above answer works perfectly, but disables the ability to have click to call phone numbers (which is a major problem if you are building a responsive site). I have found a better work around to be make the phone number a link. Example:

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

This would then allow you to style the "link" however you want, and the "a" styles in your CSS override the Edge and iPhone styles on the phone number. The only issue with this is it makes the phone number a link for all devices, but I have found this not to be an issue as almost every device has some sort of click to call feature or app included.

I've faced this issue, but with a slightly different use case: The number it's highlighting is not a phone number, so I don't want any special formatting.

For example you might have something like:

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

For me*, Edge will convert 08 2017 10 into a phone number link. Thanks, Edge!

I've found that you can get around this by inserting invisible inline-block element into the middle of the 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>

I can't see if this works for your phone number as I don't see highlighting in either case. You might need to nudge the positioning of the span.

Incidentally, the fact that you can do this is one of the many reasons you shouldn't copy commands off webpages and into your 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>

*I think Edge's highlighting of numbers is regional. Your jsfiddle isn't highlighted for me, but I'm in the UK. Here is seems to highlight numbers that begin with 0.

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://learn.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/dev-guides/dn265018(v=vs.85)#controlling-phone-number-detection