如何删除iPhone / iOS上蓝色的电话号码样式？
在iPhone上查看时，有没有办法从电话号码中删除默认的蓝色超链接颜色？ 就像一个特定的移动Safari标签或CSS添加？
我只有这个号码：
<p id="phone-text">Call us on <strong>+44 (0)20 7194 8000</strong></p> 而且没有超链接，但iPhone仍然将这个文本编号作为超链接。 我在我的一些网站上有这个渲染问题，但不明白为什么会发生这种情况。
我没看过这个post：
移动HTML呈现数字
但这是唯一可能的解决scheme吗？
两个选项…
1.设置format-detection元标记。
要删除电话号码的所有自动格式，请将其添加到您的html文档的head ：
<meta name="format-detection" content="telephone=no">
查看更多苹果专用Meta标签密钥 。
注意：如果您的网页上有这些电话号码，则应手动将其格式化为链接：
<a href="tel:+1-555-555-5555">1-555-555-5555</a>
2.不能设置元标记？ 想使用CSS ？
如果您无法设置元标记（例如在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; }
如果您想要定位特定的链接，请使用链接上的类，然后将上面的cssselect器更新a[x-apple-data-detectors].class-name 。
或者，你可以使用这个CSSselect器，以tel开头的目标链接。
a[href^="tel"] { /* css propery: value pairs here */ }
只是要详细说明大卫·托马斯的早期build议：
a[href^="tel"]{ color:inherit; text-decoration:none; }
将此添加到您的CSS留下电话号码的function，但剥离下划线，并匹配您原来使用的颜色。
奇怪，我可以张贴我自己的答案，但我不能回应别人的..
如果您想要保留电话号码的function ，但只是为了显示目的而删除下划线，则可以将链接设置为任何其他的样式：
a:link {text-decoration: none; /* or: underline | line-through | overline | blink (don't use blink. Ever. Please.) */ }
我还没有看到文档，build议一个类被应用到电话号码链接，所以你必须添加类/ ids链接，你想有不同的风格。
或者，您可以使用以下方式设置链接的样式
a[href^=tel] { /* css */ }
这是iPhone所能理解的，不会被任何其他UA应用（据我所知，也许Android，黑莓等用户/开发人员可以评论）。
如果用户在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;}
由于我们在一个带有电话图标的网站上使用电话：链接：在这里发布的大多数解决scheme之前，都会引入另一个问题
我使用元标记：
<meta name="format-detection" content="telephone=no">
这结合指定电话：链接整个网站应该链接的地方！
使用CSS实际上不是一个选项，因为它隐藏了相关的电话链接。
一个古老的问题，但作为上述答案都不是好的我后我如何解决它
我在列表中有一个电话号码：
<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的电话号码颜色。
根据博史密斯从这个主题： 如何删除iPhone / iOS上的电话号码的蓝色风格？
您应该在链接的href属性中应用“tel：”，如下所示：
<a href="tel:5551231234">555 123-1234</a>
它将删除任何额外的风格和DOM到电话号码string。
我一直在前后
1。
<a href="tel:5551231234">
2。
<meta name="format-detection" content="telephone=no">
试图使相同的代码适用于桌面和iPhone。 问题是，如果使用第一个选项，并且您从桌面浏览器单击该选项，则会显示一条错误消息，如果使用第二个选项，则会禁用iPhone iOS5上的Tab-to-Callfunction。
所以我尝试了一下，结果iPhone将电话号码视为一种可以用CSS格式化的特殊链接types。 我把这个数字包装在一个地址标签中（它可以和任何其他的HTML标签一起工作，只是避免使用<a>标签），并在CSS中将其设置为
.myDiv address a {color:#FFF; font-style: normal; text-decoration:none;}
它的工作原理 – 在桌面浏览器中显示一个纯文本，并在Safari移动显示作为链接与呼叫/取消窗口popup在选项卡上，没有默认的蓝色和下划线。
只要注意应用于数字的CSS规则，特别是在使用填充/边距时。
a[href^=tel]{ color:inherit; text-decoration: inherit; font-size:inherit; font-style:inherit; font-weight:inherit;
不需要使用<meta name="format-detection" content="telephone=no">删除格式检测。 尝试在任何标签中使用电话号码，而不是锚点标签，并相应地设置样式，例如： span { background:none !important; border:0; padding:0; } 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>
如果您指定了元标签，则第一行不会被格式化为链接，但第二行将被包裹在电话锚中。
你可以放弃这个元标签，并使用一个mixin
a[href^=tel]{ color:inherit; text-decoration:inherit; font-size:inherit; font-style:inherit; font-weight:inherit; }
保持你的电话号码的预期风格，但你必须确保你把他们包装在一个电话主播。
如果您希望保持谨慎，并防止未使用包装定位标签正确格式化的电话号码，则可以钻取DOM并使用此脚本进行调整。 根据需要调整replace模式。
$('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">就可以正常工作。 但从修辞的angular度来看，如果你打算使用手机和非手机号码的混合呢？
假设你只是将数字硬编码到你的HTML中，那么“在你的数字中间插入东西”将会起作用。 但是对于dynamic页面来说，它们是没有用处的，例如使用PHP从查询中输出数字数据。
举个例子，我正在创build一个城市人口清单。 一些人口足以让移动Safari浏览器变成电话号码链接。 幸运的是，我所要做的只是在数组输出周围使用PHP number_format()来插入“数千”逗号：
<?php echo number_format($row["population"]) ?>
这种格式足以说服移动Safari浏览器，这个号码有一个更具体的目的，所以它没有默认我的大号电话链接了。 @davidcondreybuild议使用<a href="tel:18001234567">1-800-123-4567</a>来指定数字的用途。
底线是，Safari移动显然确实注意语义。 鉴于HTML5是围绕语义标记build立的，而search引擎依赖于语义标记，我打算尽可能地使用它。
把数字放在一个<fieldset>将会阻止iOS将数字转换为链接，出于某种原因。 在某些情况下，这可能是正确的解决scheme。 我并不主张全面禁用转换为链接。
尝试在数字分隔之间使用短划线的ASCII字符。
由此： –
对此： –
例如：更改555-555-5555 => 555–555–5555
这对我来说是这样的：
.appleLinks a {color:#000000;} .appleLinksWhite a {color:#ffffff;}
你可以在这里find更多的信息。
在Joomla Yootheme为我工作：
a:not([class]) { color: #fff !important; }
iOS使默认情况下的电话号码可点击（出于显而易见的原因）。 当然，如果你的电话号码还不是一个链接，那么就会增加一个额外的标签来覆盖你的样式。
为了解决这个问题，尝试添加到你的样式表： a[href^=tel] { color: inherit; text-decoration: none; } a[href^=tel] { color: inherit; text-decoration: none; }
这应该保持你的电话号码风格如你所愿，而不增加额外的标记。
这个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>
