删除 Microsoft Edge 的 phone 数字样式

Question

我注意到新的 Microsoft Edge 浏览器在检测到 phone 个数字时覆盖了我的样式：

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

参见 this jsfiddle（必须使用 Microsoft Edge 打开 :P）。

这种侵入网站设计的方式，相当令人讨厌。当然似乎是 IE 继任者的特征：/

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

Answer 1

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

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

Microsoft's documentation on this tag.

希望有更好的方法可以全局关闭此功能而不会使页面膨胀...或者更好的是默认禁用此功能。

Answer 2

上述答案非常有效，但禁用了点击呼叫 phone 号码的功能（如果您正在构建响应式网站，这是一个主要问题）。我找到了一个更好的解决方法，将 phone 编号设为 link。示例：

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

这将允许您根据需要设置 "link" 样式，并且 CSS 中的 "a" 样式会覆盖 iPhone 上的边缘和 iPhone 样式=21=]数。唯一的问题是它使所有设备的 phone 号码成为 link，但我发现这不是问题，因为几乎每个设备都包含某种点击通话功能或应用程序.

Answer 3

我遇到过这个问题，但用例略有不同：它突出显示的数字不是 phone 数字，所以我不需要任何特殊格式。

例如你可能有这样的东西：

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

对我来说*，Edge 会将 08 2017 10 转换为 phone 数字 link。谢谢，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>

我看不出这是否适用于您的 phone 号码，因为在这两种情况下我都没有看到突出显示。您可能需要微调 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 开头的数字。

Answer 4

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

<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

删除 Microsoft Edge 的 phone 数字样式

Remove Microsoft Edge's phone number styling

html

css

microsoft-edge