有没有办法在iPhone上查看时从电话号码中删除默认的蓝色超链接颜色？像要添加的特定Mobile Safari标记或CSS一样？
我只有这个数字：
<p id="phone-text">Call us on <strong>+44 (0)20 7194 8000</strong></p>
并且没有超链接，但iPhone仍然将此文本编号作为超链接呈现 . 我在我的一些网站上有这个渲染问题，但无法理解为什么会这样 .
我读过这篇文章：
Mobile HTML rendering numbers
但这是唯一可行的解决方案吗？
无需使用 <meta name="format-detection" content="telephone=no"> 删除格式检测 . 尝试在任何标签中使用电话号码而不是锚标签并相应地设置样式，例如： span { background:none !important; border:0; padding:0; }
<meta name="format-detection" content="telephone=no">
span { background:none !important; border:0; padding:0; }
在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>
只是要详细说明David Thomas早先的建议：
a[href^="tel"]{ color:inherit; text-decoration:none; }
将此添加到您的css会留下电话号码的功能，但会删除下划线并匹配您最初使用的颜色 .
奇怪，我可以发布自己的答案，但我不能回应别人的..
一个老问题，但由于上述答案都不适合我，我发布了如何解决它
我在列表中有一个电话号码：
<li class="phone_menu">+555 5 555 55 55</li>
CSS：
.phone_menu{ color:orange; }
但是在iPad / iPhone上它是黑色的，所以我把它添加到了css中：
.phone_menu a{ color:orange; }
如果您想保留电话号码的功能，但只是为了显示目的而删除下划线，您可以将链接设置为任何其他类型：
a:link {text-decoration: none; /* or: underline | line-through | overline | blink (don't use blink. Ever. Please.) */ }
我没有't seen documentation that suggest a class is applied to the phone number links, so you' ll必须添加类/ ID到你想要有不同风格的链接 .
或者，您可以使用以下方式设置链接
a[href^=tel] { /* css */ }
这是iPhone的理解，并且不会被任何其他UA应用（据我所知，也许Android，Blackberry等用户/开发者可以发表评论） .
由于我们在具有电话图标的网站上使用tel：links：在此处发布的大多数解决方案引入了另一个问题 .
我使用了元标记：
这与在网站范围内指定tel：链接相结合，它应该链接在哪里！
使用css实际上不是一个选项，因为它隐藏了相关的电话链接 .
iOS默认情况下可以点击电话号码（原因很明显） . 当然，如果您的电话号码不是链接，那么会添加一个额外的标签，该标签会覆盖您的样式 .
要解决此问题，请尝试将其添加到样式表中： a[href^=tel] { color: inherit; text-decoration: none; }
a[href^=tel] { color: inherit; text-decoration: none; }
这应该保持您的电话号码符合您的预期，而无需添加额外的标记 .
a[href^=tel]{ color:inherit; text-decoration: inherit; font-size:inherit; font-style:inherit; font-weight:inherit;
这样做对我来说：
.appleLinks a {color:#000000;} .appleLinksWhite a {color:#ffffff;}
你可以找到更多信息here .
将数字放在<fieldset>中将阻止iOS出于某种原因将数字转换为链接 . 在某些情况下，这可能是正确的解决方案 . 我不主张全面禁止转换为链接 .
<meta name="format-detection" content="telephone=no">此metatag在iOS设备上的默认Safari浏览器中工作，仅适用于未包含在电话链接中的电话号码
1-800-123-4567 <a href="tel:18001234567">1-800-123-4567</a>
如果您指定元标记，则第一行不会被格式化为链接，但第二行将因为它包含在电话锚中而被格式化为链接 .
你可以放弃metatag，并使用mixin等
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>');
我一直在两者之间来回走动
1 .
<a href="tel:5551231234">
2 .
试图使相同的代码适用于桌面和iPhone . 问题是，如果使用第一个选项并从桌面浏览器中单击它，则会显示错误消息，如果使用第二个选项，则会禁用iPhone iOS5上的选项卡到呼叫功能 .
所以我尝试并试过，结果发现iPhone将电话号码视为一种特殊类型的链接，可以用CSS格式化 . 我将数字包装在地址标记中（它可以与任何其他HTML标记一起使用，只是尝试避免 <a> 标记）并在CSS中将其设置为样式
<a>
.myDiv address a {color:#FFF; font-style: normal; text-decoration:none;}
并且它工作 - 在桌面浏览器中显示纯文本和Safari移动设备显示为在选项卡上弹出的呼叫/取消窗口的链接，没有默认的蓝色和下划线 .
Just be careful with the css rules applied to the number especially when using padding/margin.
如果人们在Google上发现此问题，您只需将电话号码视为链接，因为Apple会自动将其设置为一个 .
你的HTML
你的CSS
#phone-text a{color:#fff; text-decoration:none;}
简单的技巧对我有用，在电话号码中间添加了一个隐藏的对象 .
<span style="color: #fff;"> 0800<i style="display:none;">-</i> 9996369</span>
这将帮助您覆盖IOS的电话号码颜色 .
二选项...
要删除电话号码的所有自动格式，请将其添加到 html 文档的 head 中：
html
head
查看更多Apple-Specific Meta Tag Keys .
注意：如果页面上有这些号码的电话号码，您应手动将其格式化为链接：<a href="tel:1-555-555-5555"> 1-555-555-5555 </a>
两个 css 选项：
css
使用此css属性选择器以 tel 开头的 href 目标链接：
tel
href
a[href^="tel"] { color: inherit; /* Inherit text color of parent element. */ text-decoration: none; /* Remove underline. */ /* Additional css `propery: value;` pairs here */ }
或者，您可以在无法设置元标记时 - 例如在链接/锚标记（ <a href=""></a> ）中使用html电子邮件包装电话号码，然后使用类似于以下内容的css定位其样式并调整所需的特定属性重启：
<a href=""></a>
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[x-apple-data-detectors].class-name
尝试在数字分隔之间使用短划线的ASCII字符 .
由此： -
对此： –
–
例如：更改 555-555-5555 => 555–555–5555
555-555-5555
555–555–5555
根据Beau Smith的话说：How do I remove the blue styling of telephone numbers on iPhone/iOS?
您应该在链接的href属性中应用“tel：”，如下所示：
<a href="tel:5551231234">555 123-1234</a>
它将删除任何附加样式和DOM到电话号码字符串 .
如果您不打算在您的页面上有任何电话号码，那么 <meta name="format-detection" content="telephone=no"> 将正常工作 . 但从修辞的角度来说，如果你打算使用手机和非手机号码混合怎么办？
假设您只是在HTML中硬编码数字，“在数字中间插入内容”黑客将会起作用 . 但它们几乎没有用于动态页面，例如使用PHP从查询中输出数字数据 .
作为一个例子，我正在生成一个城市人口列表 . 一些人口足够大，导致Mobile Safari将他们变成电话号码链接 . 幸运的是，我所要做的就是在数组输出周围使用PHP number_format() 来插入"thousands"逗号：
number_format()
<?php echo number_format($row["population"]) ?>
这种格式足以说服Mobile Safari，这个数字有一个更具体的目的，所以它不再将我的大号数据默认为电话链接 . 对于@davidcondrey建议使用 <a href="tel:18001234567">1-800-123-4567</a> 来指定数字的目的，情况也是如此 .
<a href="tel:18001234567">1-800-123-4567</a>
底线是Safari Mobile显然确实关注语义 . 鉴于HTML5是围绕语义标记构建的，并且搜索引擎依赖于语义标记，我打算尽可能多地使用它 .
20 回答
无需使用
<meta name="format-detection" content="telephone=no">删除格式检测 . 尝试在任何标签中使用电话号码而不是锚标签并相应地设置样式，例如：span { background:none !important; border:0; padding:0; }在Joomla Yootheme为我工作：
此x-ms-format-detection =“none”属性处理格式电话 .
https://msdn.microsoft.com/en-us/library/dn337007(v=vs.85).aspx
如果您只想避免使用电话号码作为链接，请尝试使用字体标记：
只是要详细说明David Thomas早先的建议：
将此添加到您的css会留下电话号码的功能，但会删除下划线并匹配您最初使用的颜色 .
奇怪，我可以发布自己的答案，但我不能回应别人的..
一个老问题，但由于上述答案都不适合我，我发布了如何解决它
我在列表中有一个电话号码：
CSS：
但是在iPad / iPhone上它是黑色的，所以我把它添加到了css中：
如果您想保留电话号码的功能，但只是为了显示目的而删除下划线，您可以将链接设置为任何其他类型：
我没有't seen documentation that suggest a class is applied to the phone number links, so you' ll必须添加类/ ID到你想要有不同风格的链接 .
或者，您可以使用以下方式设置链接
这是iPhone的理解，并且不会被任何其他UA应用（据我所知，也许Android，Blackberry等用户/开发者可以发表评论） .
由于我们在具有电话图标的网站上使用tel：links：在此处发布的大多数解决方案引入了另一个问题 .
我使用了元标记：
<meta name="format-detection" content="telephone=no">这与在网站范围内指定tel：链接相结合，它应该链接在哪里！
使用css实际上不是一个选项，因为它隐藏了相关的电话链接 .
iOS默认情况下可以点击电话号码（原因很明显） . 当然，如果您的电话号码不是链接，那么会添加一个额外的标签，该标签会覆盖您的样式 .
要解决此问题，请尝试将其添加到样式表中：
a[href^=tel] { color: inherit; text-decoration: none; }这应该保持您的电话号码符合您的预期，而无需添加额外的标记 .
a[href^=tel]{ color:inherit; text-decoration: inherit; font-size:inherit; font-style:inherit; font-weight:inherit;这样做对我来说：
你可以找到更多信息here .
将数字放在<fieldset>中将阻止iOS出于某种原因将数字转换为链接 . 在某些情况下，这可能是正确的解决方案 . 我不主张全面禁止转换为链接 .
<meta name="format-detection" content="telephone=no">此metatag在iOS设备上的默认Safari浏览器中工作，仅适用于未包含在电话链接中的电话号码
如果您指定元标记，则第一行不会被格式化为链接，但第二行将因为它包含在电话锚中而被格式化为链接 .
你可以放弃metatag，并使用mixin等
保持电话号码的预期样式，但您必须确保将它们包装在电话锚中 .
如果您需要格外谨慎并防止电话号码没有使用包装锚标签正确格式化，您可以浏览DOM并使用此脚本进行调整 . 根据需要调整更换图案 .
没有jQuery甚至更好
我一直在两者之间来回走动
1 .
2 .
试图使相同的代码适用于桌面和iPhone . 问题是，如果使用第一个选项并从桌面浏览器中单击它，则会显示错误消息，如果使用第二个选项，则会禁用iPhone iOS5上的选项卡到呼叫功能 .
所以我尝试并试过，结果发现iPhone将电话号码视为一种特殊类型的链接，可以用CSS格式化 . 我将数字包装在地址标记中（它可以与任何其他HTML标记一起使用，只是尝试避免
<a>标记）并在CSS中将其设置为样式并且它工作 - 在桌面浏览器中显示纯文本和Safari移动设备显示为在选项卡上弹出的呼叫/取消窗口的链接，没有默认的蓝色和下划线 .
Just be careful with the css rules applied to the number especially when using padding/margin.
如果人们在Google上发现此问题，您只需将电话号码视为链接，因为Apple会自动将其设置为一个 .
你的HTML
你的CSS
简单的技巧对我有用，在电话号码中间添加了一个隐藏的对象 .
这将帮助您覆盖IOS的电话号码颜色 .
二选项...
1.设置格式检测元标记 .
要删除电话号码的所有自动格式，请将其添加到
html文档的head中：查看更多Apple-Specific Meta Tag Keys .
2.无法设置元标记？想用css吗？
两个
css选项：选项1（更适合网页）
使用此css属性选择器以
tel开头的href目标链接：选项2（更适合html电子邮件模板）
或者，您可以在无法设置元标记时 - 例如在链接/锚标记（
<a href=""></a>）中使用html电子邮件包装电话号码，然后使用类似于以下内容的css定位其样式并调整所需的特定属性重启：如果要定位特定链接，请使用链接上的类，然后将上面的css选择器更新为
a[x-apple-data-detectors].class-name.尝试在数字分隔之间使用短划线的ASCII字符 .
由此： -
对此：
–例如：更改
555-555-5555=>555–555–5555根据Beau Smith的话说：How do I remove the blue styling of telephone numbers on iPhone/iOS?
您应该在链接的href属性中应用“tel：”，如下所示：
它将删除任何附加样式和DOM到电话号码字符串 .
如果您不打算在您的页面上有任何电话号码，那么
<meta name="format-detection" content="telephone=no">将正常工作 . 但从修辞的角度来说，如果你打算使用手机和非手机号码混合怎么办？假设您只是在HTML中硬编码数字，“在数字中间插入内容”黑客将会起作用 . 但它们几乎没有用于动态页面，例如使用PHP从查询中输出数字数据 .
作为一个例子，我正在生成一个城市人口列表 . 一些人口足够大，导致Mobile Safari将他们变成电话号码链接 . 幸运的是，我所要做的就是在数组输出周围使用PHP
number_format()来插入"thousands"逗号：<?php echo number_format($row["population"]) ?>这种格式足以说服Mobile Safari，这个数字有一个更具体的目的，所以它不再将我的大号数据默认为电话链接 . 对于@davidcondrey建议使用
<a href="tel:18001234567">1-800-123-4567</a>来指定数字的目的，情况也是如此 .底线是Safari Mobile显然确实关注语义 . 鉴于HTML5是围绕语义标记构建的，并且搜索引擎依赖于语义标记，我打算尽可能多地使用它 .