HTML电子邮件链接颜色困境

Question

我设计了一个HTML电子邮件,我遇到了以下问题:首先,我的整个设计基于蓝色,因此读者/用户无法读取任何蓝色文本,文本必须为白色.GMAIL自动为彩色电话号码和蓝色链接,但主要问题是Microsoft Outlook OWA.

要修复GMAIL中的电话号码和链接着色,我执行了以下操作:

<a style="color: #FFFFFF; 
   text-decoration: none" 
   href="#/">
       <span style="color: #FFFFFF; 
                    text- decoration: none">
           1800-000-0000
       </span>
</a>

这适用于GMAIL和其他任何地方,但我提到我的大多数客户端使用Outlook或MS OWA(Outlook Web应用程序).

OWA忽略我在内联样式中设置的颜色,并使链接默认为蓝色; 这仅在预览电子邮件时发生.如果您实际打开电子邮件,所有样式都会启动.

我的困境是,我该怎么办？我已经放弃了希望,但这是我的最后一招.有没有办法覆盖Outlook OWA的链接颜色？我用过了!重要的是,FONT标签,NESTING到5度.

这里的问题不是Outlook,而是OWA.

这是我在Chrome中检查元素时的屏幕截图:

这是FF:

有任何想法吗？

请!

Answer 1

您可以通过包含<font>现代HTML中不推荐使用的声明来获得成功,尽管某些版本的OWA仍然尊重它:

<a style="color: #FFFFFF; text-decoration: none" href="#/"><span style="color: #FFFFFF; text- decoration: none"><font color="#FFFFFF">1800-000-0000</font></span></a>

Answer 2

Outlook Web App(OWA)链接颜色从内联样式更改.我花了几个小时尝试更改/修复OWA中的链接颜色,它删除了我正在创建的电子邮件模板的内联样式.我用+标签尝试了各种技术但没有成功.终于找到了似乎有用的东西:

      <a href="http://www.somewebsite.com.au/" target="_blank" style="color:#FFFFFF;">White Link</a>

将其更改为:

      <a href="http://www.somewebsite.com.au/" target="_blank" style="color:#FFFFF6;">White Link (almost)</a>

到目前为止似乎很好.

进一步测试.我把略微偏色的颜色放在<td style="color:#FFFFF6;">那个正确的颜色上<a href="http://www.somewebsite.com.au/" target="_blank" style="color:#FFFFFF;">

Answer 3

它是Outlook的一个已知错误,如果锚标记不包含有效的URL,那么将忽略所述标记的样式.

在这种情况下,添加!important的趋势也会对你不利,因为Outlook将完全忽略任何后缀为!important的标签.

在您的锚标记上放置一个URL,或将文本包装在锚点内的span标记中,然后将样式放在那里.

Answer 4

我已经能够通过在a标签内放置一张桌子来解决这个问题。

<a href="">
    <table>
        <tr>
            <td style="color: #FFFFFF">Link text here</td>
        </tr>
    </table>
</a>

Answer 5

OWA 实际上剥离了 a 标签的所有样式，包括您包含的 span 标签的样式。您可以在头部添加样式，但 OWA 再次忽略超链接的这一点。我在 head 中添加了 a、a:link、a:visited 的样式，颜色与 a 标签和包含的 span 标签中的颜色相同。结果？我的链接文本是彩色的，但下划线仍然是默认的蓝色。线索：我没有任何线索。