移除Microsoft Edge浏览器的电话号码样式化

Question

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

<span class="phone">[phone]</span>

请查看此jsfiddle（必须使用Microsoft Edge打开:P）。

这种行为侵犯了网站的设计，十分讨厌。看起来像是IE的继任者的特点 :/

我该如何覆盖或禁用它，以便我的网站用户不会看到它？

- karns

---

我希望这不是由恶意软件实际引起的... - karns

啊，我看到Edge里面没有任何插件... :) 祝你好运! :) - sinisake

我今天刚在Twitter上发表了评论：https://mobile.twitter.com/scunliffe/status/631484565492625409。就目前而言，除非微软撤销这个糟糕的决定，否则您需要在每个页面上添加`<meta name="format-detection" content="telephone=no"/>`来消除这个问题。 :-( - scunliffe

它也适用于类似145.1231321的纬度/经度数字。 - behelit

此外，突出显示的数字格式因用户PC的“主页位置”设置而异，因此这会对所有用户产生不同的影响！这意味着当您测试页面时，尽管使用相同的浏览器，最终用户可能实际上看到不同的内容：https://learn.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/dev-guides/dn454587%28v%3dvs.85%29 - SharpC

Answer 1

你可以通过在页面头部添加此元标签来摆脱它。

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

这个标签的相关文档可以在Microsoft官网上找到。

希望有更好的方法可以全局关闭此功能而不会使页面臃肿... 更好的情况是默认禁用此功能。

- scunliffe

---

好的回答！您能否添加有关此问题的文档链接？谢谢。 - karns

愚蠢的设计。如果有人想这样做，至少你可以允许一个属性，比如“detect-phone=true”，使其变成可选项，因为有时候如果不需要的话，你的Web应用程序就不需要允许这样做了。 - Miguel

Answer 2

如果您不想像所选答案建议的那样禁用整个页面，您可以向特定标记添加以下属性

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

参考资料： https://learn.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/dev-guides/dn265018(v=vs.85)#controlling-phone-number-detection

- maguy

---

我知道这个答案有点老了，但是对于任何想要查找这个问题的人：我必须将它添加到一个父标签中（例如，比标签或您正在使用来显示电话号码的标签更高一级的<div>） 。 - Dortimer

对答案和Debasertron的评论都点个赞。关于评论，似乎需要一个块级父元素 - 我尝试了span，但不起作用，但div可以。 - Masala

Answer 3

上面的答案完美地解决了问题，但会禁用点击呼叫电话号码的功能（如果你正在构建一个响应式网站，这是一个重大问题）。我发现更好的解决方法是将电话号码制作成链接。例如：

<a href="tel:[phone]">[phone]</a>

这将允许您根据自己的喜好对“链接”进行样式设置，并且在CSS中对“a”样式的设置会覆盖电话号码上Edge和iPhone的样式。唯一的问题是这会使得所有设备都可以将电话号码作为链接，但我发现这不是一个问题，因为几乎每个设备都有某种点击拨打电话或应用程序的功能。

- cameron

---

在我看来，最好的方法！ - conceptdeluxe

尽管问题是“如何禁用”，但如果您试图创建一个考虑到手机使用的响应式网站，我同意这会是更好的回答。 - JStevens

Answer 4

我面对过这个问题，但使用情况略有不同：它要突出显示的数字并不是电话号码，所以我不想有任何特殊格式。

例如，您可能有这样的内容：

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

对我来说，Edge会将08 2017 10转换成电话号码链接。感谢Edge！

我发现可以通过在字符串中间插入不可见的inline-block元素来避免此问题：

.notel{
  display:inline-block;
  height:0px;
  width:0px;
}

<span class="phone">[phone]</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>

我不确定这个代码是否适用于你的电话号码，因为无论如何都没有看到高亮显示。你可能需要微调span的位置。

顺便说一句，你可以这样做的事实是你不应该从网页上复制命令并粘贴到终端中的许多原因之一：

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>

我认为Edge浏览器的数字高亮功能是地区性的。你的jsfiddle对我来说没有高亮显示，但我在英国。在这里，它似乎会高亮以0开头的数字。

- Jools