在 iPhone 上查看电话号码时，有没有办法从电话号码中删除默认的蓝色超链接颜色？想要添加特定的 Mobile Safari 标记或 CSS？
我只有这个号码：
<p id="phone-text">Call us on <strong>+44 (0)20 7194 8000</strong></p>
并且没有超链接，但 iPhone 仍将此文本编号呈现为超链接。我在我的一些网站上遇到了这个渲染问题，但不知道为什么会这样。
我确实看过这篇文章：
但这是唯一可能的解决方案吗？
【问题讨论】：
标签： html ios css mobile-safari
a[href^=tel]{
color:inherit;
text-decoration: inherit;
font-size:inherit;
font-style:inherit;
font-weight:inherit;
【讨论】：
两个选项……
format-detection 元标记。要删除电话号码的所有自动格式，请将其添加到您的 html 文档的 head：
<meta name="format-detection" content="telephone=no">
查看更多Apple-Specific Meta Tag Keys。
注意：如果页面上有带有这些号码的电话号码，您应该手动将它们格式化为链接：
<a href="tel:+1-555-555-5555">1-555-555-5555</a>
css？两个css 选项：
使用此 css 属性选择器以 href 值开头的目标链接 tel：
a[href^="tel"] {
color: inherit; /* Inherit text color of parent element. */
text-decoration: none; /* Remove underline. */
/* Additional css `propery: value;` pairs here */
}
或者，当您无法设置元标记时（例如在 html 电子邮件中），您可以将电话号码包裹在链接/锚标记 (<a href=""></a>) 中，然后使用类似于以下内容的 css 定位它们的样式并调整您需要重置的特定属性：
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
如果您想定位特定链接，请在链接上使用类，然后将上面的 css 选择器更新为 a[x-apple-data-detectors].class-name。
【讨论】：
这个 x-ms-format-detection="none" 属性处理格式电话。
https://msdn.microsoft.com/en-us/library/dn337007(v=vs.85).aspx
<p id="phone-text" x-ms-format-detection="none" >Call us on <strong>+44 (0)20 7194 8000</strong></p>
【讨论】：
默认情况下，iOS 使电话号码可点击（原因很明显）。当然，如果您的电话号码还不是链接，这会添加一个额外的标签，该标签会覆盖您的样式。
要修复它，请尝试将其添加到您的样式表中：a[href^=tel] { color: inherit; text-decoration: none; }
这应该使您的电话号码保持您期望的样式，而无需添加额外的标记。
【讨论】：
将数字放入
【讨论】：
在 Joomla Yootheme 中为我工作：
a:not([class]) {
color: #fff !important;
}
【讨论】：
只是为了详细说明 David Thomas 早先的建议：
a[href^="tel"]{
color:inherit;
text-decoration:none;
}
将此添加到您的 css 会保留电话号码的功能，但会去除下划线并与您最初使用的颜色相匹配。
奇怪的是我可以发布自己的答案，但我不能回复别人的..
【讨论】：
如果您不打算在页面上显示任何电话号码，那么
<meta name="format-detection" content="telephone=no">
会工作得很好。但从修辞上讲，如果您打算同时使用电话号码和非电话号码怎么办？
假设您只是将数字硬编码到 HTML 中，那么“在数字中间插入内容”的技巧将起作用。但它们对于动态页面几乎没有用处，例如使用 PHP 从查询中输出数字数据。
例如，我正在生成一个城市人口列表。一些人口大到足以让 Mobile Safari 将它们变成电话号码链接。幸运的是，我所要做的就是在数组输出周围使用 PHP number_format() 插入“千”逗号：
<?php echo number_format($row["population"]) ?>
这种格式足以让 Mobile Safari 相信该号码有更具体的用途，因此它不再将较大的号码默认为电话链接。 @davidcondrey 提出的使用 <a href="tel:18001234567">1-800-123-4567</a> 指定号码用途的建议也是如此。
底线是 Safari Mobile 显然确实关注语义。鉴于 HTML5 是围绕语义标记构建的，而搜索引擎依赖于语义标记，我打算尽可能多地使用它。
【讨论】：
<meta name="format-detection" content="telephone=no">。此元标记适用于 iOS 设备上的默认 Safari 浏览器，并且仅适用于未包含在电话链接中的电话号码，因此
1-800-123-4567
<a href="tel:18001234567">1-800-123-4567</a>
如果您指定元标记，第一行将不会被格式化为链接，但第二行会因为它被包裹在电话锚中。
您可以完全放弃元标记并使用诸如
之类的mixina[href^=tel]{
color:inherit;
text-decoration:inherit;
font-size:inherit;
font-style:inherit;
font-weight:inherit;
}
保持电话号码的预期样式，但您必须确保将它们包裹在电话锚中。
如果您想格外小心并防止电话号码的格式不正确并使用包装锚标记进行事件，您可以钻取 DOM 并使用此脚本进行调整。根据需要调整替换模式。
$('body').html($('body').html().replace(/^\D?(\d{3})\D?\D?(\d{3})\D?(\d{4})/g, '<a href="tel:+1$1$2$3">($1) $2-$3</a>'));
没有 jQuery 甚至更好
document.body.innerHTML = document.body.innerHTML.replace(/^\D?(\d{3})\D?\D?(\d{3})\D?(\d{4})/g,'<a href="tel:+1$1$2$3">($1) $2-$3</a>');
【讨论】：
简单的技巧对我有用，在电话号码中间添加一个隐藏对象。
<span style="color: #fff;">
0800<i style="display:none;">-</i> 9996369</span>
这将帮助您覆盖 IOS 的电话号码颜色。
【讨论】：
由于我们在网站上使用 tel: 链接并在 : 上使用电话图标，因此此处发布的大多数解决方案都会引入另一个问题。
我使用了元标记：
<meta name="format-detection" content="telephone=no">
这与指定 tel: links 站点范围内应该链接的位置相结合！
使用 css 确实不是一种选择，因为它隐藏了相关的电话链接。
【讨论】：
一个老问题，但由于上述答案都对我没有好处，我发布了我是如何解决它的
我在列表中有一个电话号码：
<li class="phone_menu">+555 5 555 55 55</li>
css:
.phone_menu{
color:orange;
}
但在 iPad/iPhone 上它是黑色的，所以我只是将其添加到 css 中：
.phone_menu a{
color:orange;
}
【讨论】：
无需使用<meta name="format-detection" content="telephone=no"> 删除格式检测。尝试在任何标签中使用电话号码，而不是锚标签并相应地对其进行样式设置，例如：span { background:none !important; border:0; padding:0; }
【讨论】：
如果人们在 Google 上找到此问题，您只需将电话号码视为一个链接，因为 Apple 会自动将其设置为一个。
你的 HTML
<p id="phone-text">Call us on <strong>+44 (0)20 7194 8000</strong></p>
你的 CSS
#phone-text a{color:#fff; text-decoration:none;}
【讨论】：
我一直在来回走动
1.
<a href="tel:5551231234">
2.
<meta name="format-detection" content="telephone=no">
尝试使相同的代码适用于桌面和 iPhone。问题在于，如果使用第一个选项并且您从桌面浏览器中单击它，则会显示错误消息，如果使用第二个选项，则会禁用 iPhone iOS5 上的选项卡呼叫功能。
所以我反复尝试，结果发现 iPhone 将电话号码视为一种特殊类型的链接，可以使用 CSS 进行格式化。我将数字包装在地址标签中（它可以与任何其他 HTML 标签一起使用，只是尽量避免使用<a> 标签）并在 CSS 中将其样式化为
.myDiv address a {color:#FFF; font-style: normal; text-decoration:none;}
它起作用了——在桌面浏览器中显示纯文本，在 Safari 移动设备中显示为链接，在选项卡上弹出呼叫/取消窗口，没有默认的蓝色和下划线。
请注意应用于数字的 css 规则，尤其是在使用填充/边距时。
【讨论】：
【讨论】：
尝试在数字分隔符之间使用 ASCII 字符作为破折号。
从此：-
对此：&ndash;
例如：更改555-555-5555 => 555&ndash;555&ndash;5555
【讨论】：
如果您只是想避免电话号码成为链接，请尝试使用字体标签：
<p>800<font>-</font>555<font>-<font>1212</p>
【讨论】：
如果您想保留电话号码的功能，但只是为了显示目的而删除下划线，您可以将链接样式设置为任何其他：
a:link {text-decoration: none; /* or: underline | line-through | overline | blink (don't use blink. Ever. Please.) */ }
我没有看到建议将类应用于电话号码链接的文档，因此您必须将类/ID 添加到您想要具有不同样式的链接。
或者，您可以使用以下方式设置链接样式：
a[href^=tel] { /* css */ }
这是 iPhone 可以理解的，不会被任何其他 UA 应用（据我所知，也许 Android、Blackberry 等用户/开发者可以评论）。
【讨论】：
a[href^=tel:] 可能是个好主意，这样您就不会意外地将href 匹配到telephone.html 等。