为什么iOS上电话号码的字体颜色是蓝色的？答案

【问题标题】：Why is the font color of a phone number blue on iOS?为什么iOS上电话号码的字体颜色是蓝色的？
【发布时间】：2018-09-09 03:03:17
【问题描述】：

有谁知道为什么iPad iOS 11.0、iPhone 7 iOS 11.0、iPhone X iOS 11.0.3上的字体颜色是蓝色的？我尝试以多种方式更改颜色，但根本不起作用，我的电子邮件代码中什至没有任何蓝色，因此必须计算它！

<table width="100%" border="0" cellpadding="0" cellspacing="0" align="right" style="background: #333d47; text-align: left; color: #FFFFFF;">
  <tr>
    <td style="font-family:Arial, sans-serif;font-size: 12px; color: #FFFFFF; margin:0; padding:20px; font-weight: 300 !important;">Contact us now: <span editable="true" style="color: #FFFFFF;">+1(555) 555-555</span>
    </td>
  </tr>
</table>

【问题讨论】：

这些代理检测电话号码模式并允许通过点击呼叫它，您可以尝试设置A标签的颜色
你的意思是用<a>而不是span包裹手机？ @IlyaBursov
不，只为A标签定义颜色
我确实将标签颜色设置为白色。我尝试更改包装此内容的所有内容的颜色，但颜色不会改变！
你是如何为A设置颜色的？

标签： html ios css fonts html-email

【解决方案1】：

默认情况下，iOS 会将其解释为电话号码的字符串呈现为可点击的链接。

使用format-detection 元标记，您可以禁用此功能：

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

见：Supported Meta Tags

【讨论】：

如果将该元标记放在电子邮件的<head> 中不起作用，您也可以尝试在电子邮件的<head> 中放置一个<style> 标记并使用a[href^=tel] 定位CSS。 This blog post 实际上还有其他几个选项，包括我在这里提到的两个。
但这不是锚标签！它的<span>

【解决方案2】：

您只需定义color in span tag，如下所示

 a { color: #FFFFFF !important; }
  span { color: #FFFFFF !important; }

<table width="100%" border="0" cellpadding="0" cellspacing="0" align="right" style="background: #333d47; text-align: left; color: #FFFFFF;">
  <tr>
    <td style="font-family:Arial, sans-serif;font-size: 12px; color: #FFFFFF; margin:0; padding:20px; font-weight: 300 !important;">Contact us now: <span editable="true" style="color: #FFFFFF;">+1(555) 555-555</span>
    </td>
  </tr>
</table>

【讨论】：

【解决方案3】：

iOS 为我们提供了 x-apple-data-detectors 来解决 Apple Mail 干预自动检测电话号码和地址并使其链接的问题。在你的<style> 标签中放置这样的东西应该可以解决问题：

*[x-apple-data-detectors] {
    border-bottom: 0 !important;
    cursor: default !important;
    color: inherit !important;
    text-decoration: none !important;
}

【讨论】：

【解决方案4】：

这个 CSS 解决了大多数客户端的问题

*[x-apple-data-detectors],  /* iOS */
    .x-gmail-data-detectors,    /* Gmail */
    .x-gmail-data-detectors *,
    .aBn {
        border-bottom: 0 !important;
        cursor: default !important;
        color: inherit !important;
        text-decoration: none !important;
        font-size: inherit !important;
        font-family: inherit !important;
        font-weight: inherit !important;
        line-height: inherit !important;
    }

【讨论】：

A+。我上面给出的答案来自同一个地方（github.com/TedGoas/Cerberus），但只针对 iOS（你的问题）进行了缩减，但这个答案也涵盖了 Gmail。

【解决方案5】：

请尝试将此添加到您的网站标题

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

当 iOS 检测电话号码并将其转换为人们可以点击拨打电话的链接时，就会发生这种情况。您可以通过在您的部分中添加此行为来关闭该行为。

【讨论】：

单独添加它并不能解决问题，但在头部添加 *[x-apple-data-detectors], /* iOS */ .x-gmail-data-detectors, /* Gmail */ .x-gmail-data-detectors *, .aBn { border-bottom: 0 !important; cursor: default !important; color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; } 会使其工作。试试看