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

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

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

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

我确实读过这篇文章:

移动HTML渲染数字

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


当前回答

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

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

<li class="phone_menu">+555 5 555 55 55</li>

css:

.phone_menu{
  color:orange;
}

但是在iPad/iPhone上它是黑色的,所以我只是添加了这个css:

.phone_menu a{
  color:orange;
}

其他回答

两个选项…

1. 设置格式检测元标记。

要删除所有电话号码的自动格式化,请将以下内容添加到html文档的头部:

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

查看更多苹果特定的元标签键。

注意:如果你在页面上有电话号码,你应该手动将它们格式化为链接: < a href = "电话:+ 1-555-555-5555 " > 1-555-555-5555 < / >


2. 不能设置元标签?想要使用css?

两个css选项:


选项1(更适合网页)

使用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 */
}

选项2(更适合html电子邮件模板)

或者,当你不能设置元标签时,比如在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;
}

如果你想要针对特定的链接,在你的链接上使用类,然后更新上面的css选择器为[x-apple-data-detectors].class-name。

Joomla Yootheme对我来说很有用:

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

如果人们在谷歌上发现这个问题,你所需要做的就是把电话号码作为一个链接,因为苹果会自动把它设置为一个链接。

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;}

将数字放在<fieldset>中将阻止iOS出于某些原因将数字转换为链接。在某些情况下,这可能是正确的解决方案。我并不提倡完全禁用链接转换。

如果你想保留电话号码的功能,但只是为了显示而删除下划线,你可以将链接样式设置为任何其他:

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、黑莓等平台的用户/开发者也可以对此发表评论)。