删除 Microsoft Edge 的电话号码样式答案

【问题标题】：Remove Microsoft Edge's phone number styling删除 Microsoft Edge 的电话号码样式
【发布时间】：2018-05-25 11:51:17
【问题描述】：

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

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

请参阅this jsfiddle（必须使用 Microsoft Edge 打开：P）。

这种行为会干扰网站的设计，相当令人讨厌。当然，这似乎是 IE 继任者的特征：/

我怎样才能覆盖或禁用它以使我的网站用户看不到它？

【问题讨论】：

我希望这不是实际上由恶意软件引起的...
检查加载项（没有 Edge），但某些加载项在 IE-s 中导致了这种行为...
我今天刚刚在 Twitter 上对此发表了评论：mobile.twitter.com/scunliffe/status/631484565492625409 至少在我目前所见的情况下，直到微软扭转这个糟糕的决定，你需要在你拥有的每个页面上添加 <meta name="format-detection" content="telephone=no"/>摆脱这个。 :-(
它也适用于纬度/经度数字，例如 145.1231321
此外，突出显示的数字格式也因用户 PC 的区域设置（“家庭位置”）而异，因此这将对所有用户产生不同的影响！这意味着当您测试您的页面时，尽管使用相同的浏览器，您的最终用户实际上可能会看到不同的东西：docs.microsoft.com/en-us/previous-versions/windows/…

标签： html css microsoft-edge

【解决方案1】：

您可以通过在页面标题中添加此元标记来摆脱它。

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

Microsoft's documentation on this tag.

希望有一种更好的方法可以在不使页面膨胀的情况下全局关闭此功能...或者最好默认禁用此功能。

【讨论】：

好答案！能否请您添加指向相关文档的链接？
愚蠢的设计。如果有人愿意这样做。至少，您可以允许像“detect-phone=true”这样的属性使其成为可选的，因为有时如果您的 web 应用程序不打算这样做，则不需要这样做......

【解决方案2】：

如果您不想按照所选答案的建议禁用整个页面，可以将以下属性添加到特定标签

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

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

【讨论】：

我知道这是一个旧的答案，但对于任何查找这个的人来说：我必须将它添加到父标签（比如
是从标签或其他任何东西您用来显示电话号码）。
+1 回答和 Debasertron 的评论。进一步的评论，它似乎需要一个块级父级 - 我尝试了一个跨度，它不起作用，但一个 div 很好。

【解决方案3】：

上述答案完美无缺，但禁用了点击拨打电话号码的功能（如果您正在构建响应式网站，这是一个主要问题）。我找到了一个更好的解决方法，将电话号码设为链接。示例：

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

然后，您可以根据需要设置“链接”的样式，并且 CSS 中的“a”样式会覆盖电话号码上的 Edge 和 iPhone 样式。唯一的问题是它使电话号码成为所有设备的链接，但我发现这不是问题，因为几乎每台设备都包含某种点击通话功能或应用程序。

【讨论】：

我眼中最好的方法！
虽然，问题是“如何禁用”，但我必须同意，如果您尝试创建一个考虑到手机使用的响应式网站，这将是一个更好的回应。

【解决方案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">(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>

我看不出这是否适用于您的电话号码，因为在这两种情况下我都看不到突出显示。您可能需要微调跨度的位置。

顺便说一句，您可以这样做是您不应该将命令从网页复制到终端的众多原因之一：

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 开头的数字。

【讨论】：