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 Application）。

OWA会忽略我在内联样式中设置的颜色，并使链接变成默认的蓝色；这仅在预览电子邮件时发生。如果您实际打开邮件，则所有样式都将生效。

我的困境是，我该怎么办？我已经放弃希望了，但这是我的最后一招。有没有办法覆盖Outlook OWA的链接颜色？我已经使用了!IMPORTANT、FONT标签、嵌套至5度。

问题不在Outlook，而在OWA。

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

这里是FF的：

有什么想法吗？

拜托了！

- Asynchronous

---

你是否在样式未应用的状态下使用浏览器检查过它？通过 Firebug 或 Chrome 控制台，你应该能够确定是什么覆盖了你设置的样式。另外，只是一个猜想，你是否尝试过插入 <style>a:link, a:visited, a:hover { color: white; }</style> ？ - Jared Farrish

我该把这个样式放在哪里？并且，我没有检查任何东西，因为我认为即使你知道它，也无法控制它。不确定，只是一个想法。顺便说一句，如果样式不是内联的，它们会被剥离吗？ - Asynchronous

如果您发现被覆盖的样式，您可以通过在您的样式中添加 !important 来覆盖它。通常我认为这是一种不好的做法，但这可能是一个适合使用的情况。 - Hidde

你有没有试过查看那里的代码？所以我右键单击页面中的元素，然后点击检查？并没有真正看到任何东西，但我确定有东西存在，因为代码太长了。 - Asynchronous

你能复制Google Chrome的“检查元素”中看到的所有CSS吗？ - Hidde

Answer 1

通过包含在现代 HTML 中已被弃用的 <font> 声明，您将在某些版本的 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>

- estaples

---

适用于Outlook 2016。 - zed

适用于Mac OSX、Windows7和Windows10上的Outlook 2016！ - jpw

FONT元素不支持HTML5，并且Gmail不接受它，但在Outlook中仍然有效。 - Jim

可能解释一下你的解决方案的其余部分会很好。我想复制它，但不确定我是否需要全部内容。 - BBaysinger

这是在Outlook中的方式。 - mydoglixu

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;">中。

- Kerry Smyth

---

这对我也起作用了，谢谢！只要<a>标签在另一个指定了不同颜色的元素内部，<a>的颜色就会被遵守（看起来是这样）。OWA版本14.3.235.1，Firefox 41。 - Jay

Answer 3

Outlook存在一个已知的bug，如果一个锚点标签不包含有效的URL，则该标签的样式将被忽略。

在这种情况下，倾向于添加!important将对您产生反效果，因为Outlook将完全忽略任何带有!important后缀的标签。

在您的锚点标签上放置一个URL，或者在锚点内部用标签包装文本并在那里设置样式。

- davidcondrey

---

可以确认。当我移除了 !important 时，一切都正常工作了。 - prawn

Answer 4

我可以通过在a标签内添加一个表格来解决这个问题。

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

- kavun

---

LOL，WTF，为什么会这样，M$，为什么会这样。这对我真的有效，干得好 :) - Larzan

这样，你的链接在Outlook 2003中将无法工作。你应该只在<a>标签内放置<img>标签和文本或内联元素。 - lyubeto

不要啊！它成功了！:O - mydoglixu

Answer 5

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

它对我有用！确保使用 <strong>，我尝试了其他标签，但那不起作用。

- leon

Answer 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>

- Orlando Rodriguez

---

请先检查一下再回答。OP特别询问OWA，因此这不是一个答案。一旦你获得足够的声望，你也可以评论这种帖子所属的位置。 - YakovL

Answer 7

我还注意到，在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也会停止去除该标签（虽然我没有详细研究这种情况何时或为什么发生，但我想指出上下文在这里也可能很重要）。

我知道这些都不是对原问题的直接回答，但我想象其他有类似问题的人会觉得这些信息很有帮助。

- Matthijs Kooijman

Answer 8

在发送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 Santos Arismendy

---

顺便说一句，@darwin...行中的最后一个声明不需要分号。我也曾认为需要，但它是完全有效的。然而，这是一种不良实践，不建议用于未来扩展。请参考这里的好答案：https://dev59.com/B2ct5IYBdhLWcg3wpO7H - Phlume

Answer 9

数字。就在我们已经习惯了不能使用酷炫的新邮件技巧，因为Outlook不支持它们时，微软向我们推出了OWA，带来了一系列新的错误。

我们通过对链接应用display:inline-block来解决其可怕的链接样式。这至少可以去掉下划线。我不知道为什么。

当我们尝试将链接样式与父元素设置为相同颜色时，我们遇到了另一个错误。由于某种原因，将父元素的颜色更改为不同的颜色可以修复它。将其更改一个字符通常会得到非常接近的颜色。

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

- Bill Malcolm

Answer 10

这个问题截至今天2017年12月21日仍然存在。我的代码在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;">就可以了！奇怪但这就是微软想要戏弄我们的方式！

- curious.netter