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

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

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

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

我确实读过这篇文章:

移动HTML渲染数字

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


当前回答

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

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

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

其他回答

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

从这里:-

到此:&ndash;

例如:change 555-555-5555 => 555&ndash;555&ndash;5555

一个老问题,但上面的答案都不适合我,我张贴了我是如何解决它的

我有个电话号码在单子上:

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

我还没有看到建议将类应用于电话号码链接的文档,因此您必须向想要具有不同风格的链接添加类/id。

或者你可以使用以下方法来设置链接的样式:

a[href^=tel] { /* css */ }

iPhone可以理解这一点,但其他UA并不适用(据我所知,Android、黑莓等平台的用户/开发者也可以对此发表评论)。

由于我们在一个网站上使用tel:链接,在大多数解决方案之前,这里发布了另一个问题。

我使用元标签:

<元名称=“格式检测” 内容=“电话=否”>

这与指定tel: links站点范围内它应该链接!

使用css真的不是一个选择,因为它隐藏了相关的电话链接。

这对我来说很管用:

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

你可以在这里找到更多信息。