html - 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 的链接颜色？我使用了！IMPORTANT，字体标签，嵌套到 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 的一个已知错误，如果锚标记不包含有效的 URL，则将忽略所述标记的样式。

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

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

Answer 3

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 4

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

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

Answer 5

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

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

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

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

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>

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 剥离标签（我没有但是，调查了这种情况何时或为何发生，只是想指出上下文也可能与此处相关）。

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

Answer 8

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

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

Answer 9

When sending html emails the best practice is to stick to old HTML3 and HTML4. Email clients do not play well with CSS2 and up. Inline CSS work much better.

Instead of:

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

By the way, you have syntax errors in this line, after each css declaration you need a ;

Corrected:

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

Try this:

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

Do not forget to specify the HTML version on the DOCTYPE.

I've found myself working in both sides of this situation. I worked on a web based email client using PHP with IMAP, I had to strip HTML emails of a lot of things because they'd break not only the layout of the app but also the intended behavior of buttons and forms. How? you might ask. With a desktop email client this probably wouldn't be a problem but with a web based email client loading external css/js files can result into a very large array of potential pitfalls and nasty bugs.

On another occasion I was working on wedding invitations sent over HTMl emails, The amount of inline css we had to do was ridiculous. To make it work on you have to use mostly HTML3 and maybe a bit of HTML4 but not too much.

I recommend you to experiment with tables and deprecated HTML3 inline css.

---

Answer 10

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

Answer 11

尝试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;
}

资源

Answer 12

截至今天 21-12-2017，这个问题仍然相关。我在 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;">工作！奇怪，但这就是微软想要取笑我们的方式！

Answer 13

我看到了这个线程并尝试了上面的选项。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。我个人被要求删除下划线，所以对我来说它是完美的。

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

Answer 14

**

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

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

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