在iPhone上查看时，是否可以从电话号码中删除默认的蓝色超链接颜色？像特定的Mobile Safari标记或CSS添加？

我只有这个号码：

<p id="phone-text">Call us on <strong>+44 (0)20 7194 8000</strong></p>

而且没有超链接，但iPhone仍将此文本数字呈现为超链接。我的一些网站上出现了渲染问题，但看不到为什么发生。

我确实读了这篇文章：

移动HTML呈现数字

但这是唯一可行的解​​决方案吗？

两种选择...

1.设置format-detection元标记。

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

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

查看更多Apple特定的元标记键。

注意：如果页面上有包含这些号码的电话号码，则应手动将其设置为链接格式：

<a href="tel:+1-555-555-5555">1-555-555-5555</a>

2.无法设置元标记？要使用css吗？

两种css选择：

选项1（适合网页）

使用此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 */
}

选项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。

只是为了详细阐述David Thomas的较早建议：

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.) */ }

我还没有看到建议将类应用于电话号码链接的文档，因此您必须在要使用其他样式的链接中添加类/标识。

另外，您可以使用以下方式设置链接的样式：

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：链接，而在：上带有电话图标链接，因此此处发布的大多数解决方案都会带来另一个问题。

我使用了元标记：

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

这与指定tel：结合起来，应该在整个站点范围内链接它！

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

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

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

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

一个古老的问题，但由于以上答案均不适合我，因此我发布了如何解决的问题

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

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

CSS：

.phone_menu{
  color:orange;
}

但是在iPad / iPhone上它是黑色的，因此我将其添加到了CSS中：

.phone_menu a{
  color:orange;
}

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

博·史密斯（Beau Smith）说：“ 如何在iPhone / iOS上删除电话号码的蓝色样式？

您应在链接的href属性中应用“ tel：”，如下所示：

<a href="tel:5551231234">555 123-1234</a>

它将删除电话号码字符串中的所有其他样式和DOM。

我一直在来回之间

1。

    <a href="tel:5551231234">

2。

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

试图使相同的代码适用于台式机和iPhone。问题在于，如果使用第一个选项，然后从桌面浏览器中单击它，则会显示错误消息；如果使用第二个选项，则将禁用iPhone iOS5上的Tab-to-call功能。

因此，我反复尝试，结果发现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;
}

保持电话号码的预期样式，但必须确保将其包裹在电话锚中。

如果您要格外小心，并防止出现电话号码的格式不正确的情况，可以使用锚定标记进行钻取并进行调整。根据需要调整更换图案。

$('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将其转变为电话号码链接。幸运的是，我要做的就是number_format()在数组输出周围使用PHP 插入“千”逗号：

<?php echo number_format($row["population"]) ?>

这种格式足以使Mobile Safari确信该号码有一个更具体的用途，因此它不再将我的较大号码默认为电话链接。@davidcondrey关于使用的建议也是如此<a href="tel:18001234567">1-800-123-4567</a>用于指定数字用途。

最重要的是，Safari Mobile显然确实注意语义。鉴于HTML5是基于语义标记构建的，并且搜索引擎依赖于语义标记，因此我打算尽可能多地使用它。

将数字放在<fieldset>中将阻止iOS由于某种原因将数字转换为链接。在某些情况下，这可能是正确的解决方案。我不主张彻底禁止转换为链接。

iOS默认使电话号码可点击（出于明显的原因）。当然，这会添加一个额外的标签，如果您的电话号码还不是链接，那么它将覆盖您的样式。

要解决此问题，请尝试将其添加到样式表中： a[href^=tel] { color: inherit; text-decoration: none; }

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

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

由此： -

对此： –

例如：change 555-555-5555=>555–555–5555

这为我做到了：

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

您可以在此处找到更多信息。

在Joomla中，Yotheme为我工作：

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

此x-ms-format-detection =“ none”属性处理电话的格式。

https://msdn.microsoft.com/zh-CN/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>