Gmail 和 iOS 电子邮件客户端上的蓝色链接问题

问题描述 投票:0回答:3

我正在构建 html 电子邮件,我知道这是一个已知问题,我已经尝试了许多解决方案来强制地址/电话/电子邮件文本不改变颜色并成为 Gmail 和 ios 上的链接。对我来说部分有效的唯一解决方案是将我的文本放在里面,标签和样式具有我需要的字体颜色。这是我的例子:

...<tr><td bgcolor="#F2F2F2" align="center" style="color:#3C3D3F;line-height:24px;font-family:Tahoma, Arial, Helvetica, sans-serif;padding:15px 10px;font-size:12px;"><a href="" style="outline:none;color:#3C3D3F;cursor:initial;text-decoration:none;"><span style="color:#3C3D3F;">128 Prinston St | Somewhere, CA 22314</span></a></td></tr>...

这在具有我需要的字体颜色的意义上有效,但我不想将此文本作为链接。现在我必须将 href 属性保留为空,当单击 iOS 默认电子邮件中的文本时,该属性会指向一个白色页面。

因此,请建议任何不需要在代码中包含标签的可行解决方案。

提前致谢。

ios colors hyperlink gmail html-email
3个回答
3
投票

如果您不想要蓝色下划线,则在制作电子邮件时数据检测器已成为真正的痛苦。我有几种建议你尝试的技巧。

将以下内容放入电子邮件的

<head></head>
部分。如果您已有
<style></style>
部分,请将其添加到此处:

    <style>
    *[x-apple-data-detectors], .x-gmail-data-detectors, .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;
    }
    </style>

如果这不能解决问题,您可以随时在下划线区域周围执行类似的操作:

<span style="color: inherit !important; text-decoration: none !important; ">your content here</span>

可能解决该问题的一件事是将 META 标签添加到

<head></head>
区域:

<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="email=no" />
<meta name="x-apple-disable-message-reformatting" />

如果所有其他方法都失败了(并且我遇到了所有其他方法都失败的问题),我发现添加非打印字符可能有助于阻止数据检测器检测网址、电话号码、地址或日期。

&zwnj;

对此的变体通常是有效的:

gwally&zwnj;@&zwnj;stackoverflow&zwnj;.&zwnj;com

祝你好运,丑陋的蓝线。


1
投票

为链接添加通用样式怎么样。

<style> a:link { color: #3C3D3F; } </style>

代码:

NSString *styledHTML =  [@"<style> a:link { color: #3C3D3F; } </style>" stringByAppendingString:originalHTMLString];

NSRange rOriginal    = [originalHTMLString rangeOfString:@"<tr>"];
NSString *styledHTML = [originalHTMLString stringByReplacingCharactersInRange:rOriginal withString:@"<tr><style> a:link { color: #dc3535; } </style>"];

0
投票

我面临同样的问题,但我通过删除锚标记的 href 属性来解决它。

<td style="font-family: 'Helvetica', 'Arial', sans-serif; font-size: 12px; font-style: normal; font-weight: 400; line-height: 18.6px; text-align: center; letter-spacing: 0.36px; color: #454D51 !important; text-decoration: none !important;">Sent by <span><a href="https://www.example.com"  style="font-weight: 700; text-decoration: underline !important; color: #454D51 !important;">example.com</a></span> <a style="color: #454D51 !important; text-decoration: none !important;">128 Prinston St | Somewhere, CA 22314</a>
© www.soinside.com 2019 - 2024. All rights reserved.