如何在 iPhone/iOS 上删除电话号码的蓝色样式？

两种选择……

1.设置格式检测元标记。

要删除电话号码的所有自动格式设置，请将其添加到您的 html 文档的 head：

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

查看更多Apple-Specific Meta Tag Keys。

注意：如果页面上有带有这些号码的电话号码，您应该手动将它们格式化为链接：1-555-555-5555

2. 不能设置元标签？想使用 css 吗？

两个 css 选项：

选项 1（更适合网页）

使用此 css 属性选择器来定位具有以 tel 开头的 href 值的链接：

a[href^="tel"] {
  color: inherit; /* Inherit text color of parent element. */
  text-decoration: none; /* Remove underline. */
  /* Additional css `propery: value;` pairs here */
}

选项 2（更适合 html 电子邮件模板）

或者，当您无法设置元标记（例如在 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。

---

只是为了详细说明大卫托马斯的早期建议：

a[href^="tel"]{
    color:inherit;
    text-decoration:none;
}

将此添加到您的 css 会保留电话号码的功能，但会去除下划线并匹配您最初使用的颜色。

奇怪的是我可以发布自己的答案，但我不能回复别人的..

---

如果您想保留电话号码的功能，但只是为了显示目的而删除下划线，您可以将链接样式设置为任何其他：

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等用户/开发者可以评论）。

---

如果人们在 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;}

---

由于我们在网站上使用 tel: 链接，并且在 :before 上发布的大多数解决方案都会引入另一个问题。

我使用了元标记：

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

这与指定 tel: 链接站点范围内应该链接的位置相结合！

使用 css 确实不是一种选择，因为它隐藏了相关的电话链接。

---

a[href^=tel]{
    color:inherit;
    text-decoration: inherit;
    font-size:inherit;
    font-style:inherit;
    font-weight:inherit;

---

一个老问题，但由于上述答案都对我没有好处，我发布了我是如何解决它的

我在列表中有一个电话号码：

<li class="phone_menu">+555 5 555 55 55</li>

CSS：

.phone_menu{
  color:orange;
}

但在 iPad/iPhone 上它是黑色的，所以我只是将它添加到 css 中：

.phone_menu a{
  color:orange;
}

---

简单的技巧对我有用，在电话号码中间添加一个隐藏的对象。

<span style="color: #fff;">
0800<i style="display:none;">-</i> 9996369</span>

这将帮助您覆盖 IOS 的电话号码颜色。

---

我一直在来回

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 规则，尤其是在使用填充/边距时。

---

无需使用 <meta name="format-detection" content="telephone=no"> 删除格式检测。尝试在任何标签中使用电话号码，而不是锚标签并相应地设置样式，例如：span { background:none !important; border:0; padding:0; }

---

<meta name="format-detection" content="telephone=no">。此元标记适用于 iOS 设备上的默认 Safari 浏览器，并且仅适用于未包含在电话链接中的电话号码，因此

1-800-123-4567
<a href="tel:18001234567">1-800-123-4567</a>

如果您指定元标记，第一行将不会被格式化为链接，但第二行会因为它被包裹在电话锚点中。

您可以完全放弃元标记并使用诸如

a[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>');

---

如果您不打算在页面上显示任何电话号码，那么 <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 是围绕语义标记构建的，并且搜索引擎依赖于语义标记，我打算尽可能多地使用它。

---

将数字放入

将阻止 iOS 出于某种原因将数字转换为链接。在某些情况下，这可能是正确的解决方案。我不主张全面禁止转换为链接。

---

默认情况下，iOS 使电话号码可点击（出于显而易见的原因）。当然，如果您的电话号码还不是链接，这会添加一个额外的标签，该标签会覆盖您的样式。

要修复它，请尝试将其添加到您的样式表中：a[href^=tel] { color: inherit; text-decoration: none; }

这应该使您的电话号码保持您期望的样式，而无需添加额外的标记。

---

尝试在数字分隔符之间使用 ASCII 字符作为破折号。

由此： -

对此：–

例如：更改 555-555-5555 => 555–555–5555

---

这为我做到了：

.appleLinks a {color:#000000;}
.appleLinksWhite a {color:#ffffff;}

您可以找到更多信息here。

---

在 Joomla Yootheme 中为我工作：

a:not([class]) {
    color: #fff !important;
}

---

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

---

如果您只是想避免电话号码成为链接，请尝试使用字体标签：

<p>800<font>-</font>555<font>-<font>1212</p>

---