【问题标题】：HTML email link color dilemmaHTML电子邮件链接颜色困境
【发布时间】：2012-08-15 01:23:45
【问题描述】：

我设计了一封 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 的链接颜色？我使用了！IMPORTANT，FONT 标签，NESTING 到 5 度。

这里的问题不是 Outlook，而是 OWA。

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

这里是FF：

有什么想法吗？

请！

【问题讨论】：

在未应用样式的状态下，您是否在浏览器中查看过？使用 Firebug 或 Chrome 控制台，您应该能够确定覆盖您设置的样式的内容。另外，只是一个疯狂的猜测，您是否尝试过 <style>a:link, a:visited, a:hover { color: white; }</style> 插入？
我会把这种风格放在哪里？不，我没有检查任何东西，因为我的印象是，即使你知道，你也无法控制它。？？不确定，只是一个想法。顺便说一句，如果样式不是内联的，它们不会被剥离吗？
如果您找到被覆盖的样式，您可以在样式中添加!important 来覆盖它。通常我认为这是一种不好的做法，但这可能是一个好主意。
你有没有试过查看那里的代码？所以我右键单击页面中的元素并单击检查？没有真正看到任何东西，但我确定那里有东西，代码太长了。
你能复制你在谷歌浏览器的“检查元素”中看到的所有 CSS 吗？

标签： html css html-email email-client

【解决方案1】：

我还注意到，对于 OWA，style= 属性中的项目的顺序可能是相关的。我在使用时遇到过案例：

<a href="/some_url" style="text-decoration: none; color: inherit;">...</a>

会导致 OWA 去除 color 属性（但保留 `text-decoration），但会颠倒顺序，例如：

<a href="/some_url" style="color: inherit; text-decoration: none;">...</a>

将使 OWA 保留两者。我看不出这有什么意义，但事实就是这样……

我还看到标签的上下文可以影响这种样式剥离：我上面提到的剥离是在 a 标签前面有 h2 标签时触发的，但删除 h2 也会阻止 OWA从剥离标签（不过，我还没有调查确切发生这种情况的时间或原因，只是想指出上下文在这里也可能是相关的）。

我意识到这些都不是对原始问题的直接答案，但我想这对其他有类似问题的人会有所帮助。

【讨论】：

【解决方案2】：

<a href="#" style="color: #FFF;">
  <strong style="color: #FFF; font-weight: normal;">Example Link</strong>
</a>

它对我有用！确保使用<strong>，我尝试使用其他标签，但没有成功。

【讨论】：

【解决方案3】：

通过包含 <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>

【讨论】：

适用于 Outlook 2016
适用于 mac osx、windows7 和 windows10 上的 Outlook 2016！
FONT 元素不受 HTML5 支持，Gmail 也不接受它，但仍适用于 Outlook。

【解决方案4】：

**

支持伪 CSS（2007、2010、2016、2017 等）

这就像一个 hack，因为它不支持。

<a href="#" target="_blank" style="font-size:20px;">
   <strong style="color:#ffffff;">@Model.TelephoneTextHtml</strong>
</a>

【讨论】：

【解决方案5】：

截至 2017 年 21 月 12 日，此问题仍然有效。我在 Outlook、Gmail 中的代码没有问题，但在 Outlook Web App 中没有。我不得不使用这个过时的标签来解决它。

<a class="app-link" style="font-size:14px; color:#ff6600 !important; text-decoration:underline;" href="https://somesite/something/"><font color="#ff6600 !important;"> Gå til app</font></a>

奇怪的是，超链接中的样式不适用于 Outlook Web App(OWA)，因此，添加 <font color="#ff6600 !important;"> 有效！奇怪，但这就是微软想取笑我们的方式！

【讨论】：

【解决方案6】：

我使用了以下内容，它在 Outlook 2007、2010、2013 和 Outlook.com 中运行良好。我会尽快与 OWA 核实。

#outlookLink {text-decoration: none; color: #ffffff !important}
<a href="" id="outlookLink" name="Anchor" style="text-decoration: none; color: #ffffff !important;">Your text and link here.</a>

【讨论】：

请先检查再回答。 OP 专门询问 OWA，所以这不是答案。一旦您获得足够的声誉，您就可以在此类帖子所属的地方发表评论。

【解决方案7】：

我看到了这个帖子并尝试了上面的选项。 TD hack 可以更改十六进制代码，但如果有人想尝试，我只是偶然发现了一个不错的解决方案：

<div style="text-decoration: none;">
<a href="LINK" style="display: inline-block; color: #878f93; text-decoration: none;">LINK TEXT</a>
</div>

OWA 支持将 DIV 设置为文本装饰 NONE。我个人被要求删除下划线，所以对我来说这是完美的。

我希望人们觉得这很有用。感谢所有添加解决方案的人。

【讨论】：

【解决方案8】：

尝试将my-link 类添加到有问题的每个链接，并在style 标记中添加以下CSS：

.my-link a,
a[x-apple-data-detectors] {
  color:inherit !important;
  text-decoration: underline !important;
}

这通常涵盖了我的事情。如果失败了，这里有一个更重的代码版本：

.my-link a,
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;
}

source

【讨论】：

【解决方案9】：

数字。就在我们习惯了由于 Outlook 不支持而无法使用很酷的新电子邮件技巧时，Microsoft 向我们抛出了 OWA，其中包含大量新错误。

我们通过将display:inline-block 应用于链接来绕过其糟糕的链接样式。这至少摆脱了下划线。我不知道为什么。

在尝试将链接样式设置为与父元素相同的颜色时，我们遇到了另一个错误。由于某种原因，使父元素的颜色不同修复了它。向上或向下改变一个字符通常会给你一个非常接近的颜色。

<td style="color:#CCCCCD">
<a href="http://mylink" style="display:inline-block; color:#CCCCCC">Link</a>
</td>

【讨论】：

【解决方案10】：

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;"> 上设置了正确的颜色

【讨论】：

这对我也有用，谢谢！只要<a> 标记位于另一个指定了不同颜色的元素内，就会遵循<a> 颜色（看起来）。 OWA 版本 14.3.235.1，Firefox 41。

【解决方案11】：

它是 Outlook 的一个已知错误，如果锚标记不包含有效的 URL，则该标记的样式将被忽略。

在这种情况下，添加 !important 的倾向也会对您不利，因为 Outlook 将完全忽略任何以 !important 为后缀的标签。

在您的锚标记上放置一个 URL，或者将文本包装在锚内部的 span 标记中，然后将您的样式放在那里。

【讨论】：

可以确认。当我删除 !important 时一切正常

【解决方案12】：

我已经能够通过在a 标记内放置一个表格来解决此问题。

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

【讨论】：

LOL，WTF，whyyyyyyyy m$，whyyyyyy。这实际上对我有用，很好:)
这样，您的链接将无法在 Outlook 2003 中使用。您应该只将标记和文本或内联元素放在标记内。

【解决方案13】：

发送 html 电子邮件时，最佳做法是坚持使用旧的 HTML3 和 HTML4。电子邮件客户端不能很好地与 CSS2 及更高版本配合使用。内联 CSS 效果更好。

代替：

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

顺便说一句，你在这一行有语法错误，在每个 css 声明之后你需要一个 ;

更正：

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

试试这个：

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

不要忘记在 DOCTYPE 上指定 HTML 版本。

我发现自己在这两种情况下都在工作。我使用 PHP 和 IMAP 开发了一个基于 Web 的电子邮件客户端，我不得不剥离 HTML 电子邮件很多事情，因为它们不仅会破坏应用程序的布局，还会破坏按钮和表单的预期行为。如何？你可能会问。使用桌面电子邮件客户端这可能不是问题，但基于 Web 的电子邮件客户端加载外部 css/js 文件可能会导致大量潜在的陷阱和讨厌的错误。

在另一个场合，我正在处理通过 HTMl 电子邮件发送的婚礼请柬，我们必须做的内联 css 的数量是荒谬的。为了让它发挥作用，你有主要使用 HTML3，也可能使用一点 HTML4，但不要太多。

我建议您尝试使用表格和已弃用的 HTML3 内联 css。

【讨论】：

顺便说一句 @darwin... 行中的最后一个声明不需要半。我认为它也是如此，但它是完全有效的。但是.. 对于未来的扩展来说，这是一种不好的做法，因此不推荐。在这里参考一个好的答案：stackoverflow.com/questions/11939595/…

【解决方案14】：

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

【讨论】：