Question

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

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

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

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

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

Answer 1

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

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

Microsoft's documentation on this tag

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

Answer 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

Answer 3

上述答案效果很好，但无法点击拨打电话号码（如果您正在构建响应式网站，这是一个主要问题）。我找到了一个更好的工作，使电话号码成为一个链接。例如：

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

然后，这将允许您设置＆＃34;链接＆＃34;无论你想要什么，还有＆＃34; a＆＃34; CSS中的样式会覆盖电话号码上的Edge和iPhone样式。唯一的问题是它使电话号码成为所有设备的链接，但我发现这不是一个问题，因为几乎每个设备都有某种点击呼叫功能或应用程序。

Answer 4

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

例如，您可能会有以下内容：

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

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

我发现你可以通过在字符串中间插入不可见的inline-block元素来解决这个问题：

＆＃13;

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

＆＃13;

<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>

＆＃13;

我无法查看这是否适用于您的电话号码，因为我在任何一种情况下都看不到突出显示。您可能需要轻推跨度的定位。

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

＆＃13;

span{
display:inline-block;
height: 0px;
width: 0px;
overflow:hidden;
}
textarea{
  width: 300px;
  height:50px;
}

＆＃13;

<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>

＆＃13;

*我认为Edge对数字的重点是区域性的。你的jsfiddle对我来说并不突出，但我在英国。这里似乎突出显示以0开头的数字。

删除Microsoft Edge的电话号码样式

4 个答案: