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

在iPhone上查看电话号码时，是否有办法删除默认的蓝色超链接颜色?像一个特定的移动Safari标签或CSS添加?

我只在数字的地方有这个:

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

这里没有超链接，但iPhone仍然将这个文本数字显示为超链接。我在我的一些网站上有这个渲染问题，但不明白为什么会发生这种情况。

我确实读过这篇文章:

移动HTML渲染数字

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

当前回答

iOS在默认情况下允许点击电话号码(原因很明显)。当然，这会增加一个额外的标签，如果你的电话号码不是一个链接，它会覆盖你的样式。

要解决这个问题，请尝试将以下内容添加到样式表中:文字修饰:没有;｝

这应该保持您的电话号码样式为您所期望的，而不增加额外的标记。

其他回答

iOS在默认情况下允许点击电话号码(原因很明显)。当然，这会增加一个额外的标签，如果你的电话号码不是一个链接，它会覆盖你的样式。

要解决这个问题，请尝试将以下内容添加到样式表中:文字修饰:没有;｝

这应该保持您的电话号码样式为您所期望的，而不增加额外的标记。

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

我一直在

    <a href="tel:5551231234">

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

试着让同样的代码适用于台式机和iPhone。问题在于，如果你使用了第一个选项，并从桌面浏览器中点击它，它会给出一个错误消息，如果使用了第二个选项，它会禁用iPhone iOS5上的标签呼叫功能。

所以我试了又试，结果iPhone把电话号码当作一种特殊类型的链接，可以用CSS格式化。我把数字包装在一个地址标签(它将与任何其他HTML标签，只是尽量避免< >标签)，并在CSS样式为

.myDiv address a {color:#FFF; font-style: normal; text-decoration:none;}

在桌面浏览器中显示一个纯文本，在Safari移动浏览器中显示一个链接，并在选项卡上弹出Call/Cancel窗口，没有默认的蓝色和下划线。

只是要注意应用于数字的css规则，特别是在使用填充/边距时。

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

Joomla Yootheme对我来说很有用:

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

推荐文章