在iPhone上查看时，有没有办法从电话号码中删除默认的蓝色超链接颜色？就像要添加的特定Mobile Safari标签或CSS一样？
我的数字只有这个：
<p id="phone-text">Call us on <strong>+44 (0)20 7194 8000</strong></p>
并且没有超链接但iPhone仍然将此文本编号呈现为超链接。我在我的一些网站上有这个渲染问题，但无法理解为什么会这样。
我读过这篇文章：
但这是唯一可行的解决方案吗？
答案 0 :(得分：392)
两个选项......
format-detection元标记。要删除电话号码的所有自动格式，请将其添加到head文档的html：
<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 */
}
或者，您可以在无法设置元标记时 - 例如在链接/锚标记（<a href=""></a>）中的html电子邮件包装电话号码中，然后使用类似于以下内容的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。
答案 1 :(得分：159)
只是详细说明David Thomas先前提出的建议：
a[href^="tel"]{
color:inherit;
text-decoration:none;
}
将此添加到您的css会保留电话号码的功能，但会删除下划线并匹配您最初使用的颜色。
奇怪我可以发布自己的答案，但我不能回复别人的答案。
答案 2 :(得分：28)
如果您想保留电话号码的功能，只是为了显示目的而删除下划线，您可以将链接设置为其他任何一种：
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等用户/开发者可以发表评论）。
答案 3 :(得分：12)
如果人们在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;}
答案 4 :(得分：9)
由于我们在网站上使用电话号码的电话：链接：此处发布的大多数解决方案都会引入另一个问题。
我使用了元标记：
<meta name="format-detection" content="telephone=no">
这与在网站范围内指定 tel：links 相结合，应该链接到哪里！
使用css实际上不是一个选项，因为它隐藏了相关的电话链接。
答案 5 :(得分：5)
简单的技巧对我有用，在电话号码中间添加一个隐藏的对象。
<span style="color: #fff;">
0800<i style="display:none;">-</i> 9996369</span>
这将帮助您覆盖IOS的电话号码颜色。
答案 6 :(得分：5)
一个老问题，但由于上述答案都不适合我，我发布了如何解决它
我在列表中有一个电话号码：
<li class="phone_menu">+555 5 555 55 55</li>
的CSS：
.phone_menu{
color:orange;
}
但是在iPad / iPhone上它是黑色的，所以我把它添加到了css：
.phone_menu a{
color:orange;
}
答案 7 :(得分：3)
a[href^=tel]{
color:inherit;
text-decoration: inherit;
font-size:inherit;
font-style:inherit;
font-weight:inherit;
答案 8 :(得分：3)
根据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到电话号码字符串。
答案 9 :(得分：2)
无需使用<meta name="format-detection" content="telephone=no">删除格式检测。尝试在任何标签中使用电话号码，而不是锚标签并相应地设置样式，例如：span { background:none !important; border:0; padding:0; }
答案 10 :(得分：2)
我一直在
之间来回走动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规则，尤其是在使用填充/边距时。
答案 11 :(得分：1)
<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>');
答案 12 :(得分：1)
如果您打算在页面上打不到任何电话号码，那么
<meta name="format-detection" content="telephone=no">
会工作得很好。但从修辞的角度来说，如果你打算使用手机号码和非电话号码怎么办？
假设您只是在HTML中硬编码数字，那么＆＃34;在数字中间插入内容＆＃34;黑客会工作。但它们几乎没有用于动态页面，例如使用PHP从查询中输出数值数据。
作为一个例子，我正在生成城市人口清单。一些人口足够大，导致Mobile Safari将他们变成电话号码链接。幸运的是，我所要做的就是在数组输出周围使用PHP number_format()来插入＆＃34;数千＆＃34;逗号：
<?php echo number_format($row["population"]) ?>
这种格式足以说服Mobile Safari，这个数字有一个更具体的目的，所以它不再将我的大号数字默认为电话链接。对于@davidcondrey使用<a href="tel:18001234567">1-800-123-4567</a>来指定数字目的的建议也是如此。
底线是Safari Mobile显然确实关注语义。鉴于HTML5是围绕语义标记构建的，并且搜索引擎依赖于语义标记，我打算尽可能多地使用它。
答案 13 :(得分：1)
将数字放在＆lt; fieldset＆gt;中将阻止iOS出于某种原因将号码转换为链接。在某些情况下，这可能是正确的解决方案。我并不主张全面禁止转换为链接。
答案 14 :(得分：1)
iOS默认情况下可以点击电话号码（原因很明显）。当然，如果您的电话号码不是链接，那么会添加一个覆盖您样式的额外标签。
要解决此问题，请尝试将其添加到样式表中：a[href^=tel] { color: inherit; text-decoration: none; }
这样可以保持您的手机号码符合您的预期，而无需添加额外的标记。
答案 15 :(得分：0)
尝试在数字分色之间使用短划线的ASCII字符。
从这起： -
：–
例如：更改555-555-5555 =＆gt; 555–555–5555
答案 16 :(得分：0)
答案 17 :(得分：0)
在Joomla Yootheme为我工作：
a:not([class]) {
color: #fff !important;
}
答案 18 :(得分：0)
此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>
答案 19 :(得分：-2)
如果您只是想避免使用电话号码作为链接，请尝试使用字体标记：
<p>800<font>-</font>555<font>-<font>1212</p>