Outlook 2007 将 HTML 电子邮件中的链接样式更改为在发送到 Hotmail、Gmail 等时具有蓝色下划线。任何修复？

Posted 2023-03-15

【中文标题】Outlook 2007 将 HTML 电子邮件中的链接样式更改为在发送到 Hotmail、Gmail 等时具有蓝色下划线。任何修复？

【英文标题】：Outlook 2007 changes link styles in a HTML email to have a blue underline when sent to Hotmail, Gmail, etc. Any fixes?

【发布时间】：2011-05-07 23:35:08

【问题描述】：

我一直在使用从http://www.campaignmonitor.com/templates/ 获得的 html 电子邮件模板 在我经历过的每个示例中，当我使用 HTML 模板发送电子邮件时，所有链接都带有可怕的默认蓝色下划线。这些电子邮件是使用 Outlook 2007 发送的，在 Outlook 中查看时它们很好。但是，在 Hotmail 和 Gmail 中，无论文本是什么颜色，这个蓝色下划线都会持续存在。

我已经尝试过像这样的 a 标签的内联样式：

<a href="./" style="color: #E3A216; text-decoration: none;">Mauris commodo hendrerit risus</a>

如果我使用完全相同的 HTML 电子邮件模板代码并将其从我的 hotmail 帐户发送到另一个 hotmail 帐户，它会完美运行。所以，对我来说，这是一个 Outlook 2007 问题。

我能够剖析 Outlook 发送给 hotmail 收件人的 html，并发现 Outlook 在 HTML 代码的顶部附加了一个样式表。这是它发送的内容：

<style>
.ExternalClass .ecxshape
;
</style>

<style>
.ExternalClass p.ecxMsoNormal, .ExternalClass li.ecxMsoNormal, .ExternalClass div.ecxMsoNormal
margin-bottom:.0001pt;font-size:11.0pt;font-family:'Calibri','sans-serif';
.ExternalClass a:link, .ExternalClass span.ecxMsoHyperlink
color:blue;text-decoration:underline;
.ExternalClass a:visited, .ExternalClass span.ecxMsoHyperlinkFollowed
color:purple;text-decoration:underline;
.ExternalClass p.ecxMsoAcetate, .ExternalClass li.ecxMsoAcetate, .ExternalClass div.ecxMsoAcetate
margin-bottom:.0001pt;font-size:8.0pt;font-family:'Tahoma','sans-serif';
.ExternalClass span.ecxEmailStyle17
font-family:'Calibri','sans-serif';color:windowtext;
.ExternalClass span.ecxBalloonTextChar
font-family:'Tahoma','sans-serif';
.ExternalClass .ecxMsoChpDefault
;
@page WordSection1
size:612.0pt 792.0pt;
.ExternalClass div.ecxWordSection1
page:WordSection1;

</style>

.ExternalClass 似乎正在设置 a 标记的值，但我的内联样式似乎没有覆盖 Outlook 添加到电子邮件中的内容。

我尝试在 head 部分甚至在 body 部分中创建样式表，但这没有任何作用。

有人知道解决这个问题吗？我要么想去掉下划线，要么只用我为链接指定的颜色显示下划线。

感谢任何可以提供帮助的人。

【问题讨论】：

你解决过这个问题吗？遇到了同样的问题。

【参考方案1】：

如果您的问题很简单，例如无法覆盖 Outlook 样式表，您应该尝试使用您的内联样式声明 !important，例如

<a href="./" style="color: #E3A216 !important; text-decoration: none !important;">Mauris commodo hendrerit risus</a>

【讨论】：

对于未来的冲浪者来说，这是一个非常糟糕的主意。 Outlook 2007+ 忽略任何标记为重要的内联样式。 campaignmonitor.com/blog/post/3143/…

!important 不受 Outlook 支持，会被自动删除

@Eli 你刚刚救了我的培根。谢谢

【参考方案2】：

要摆脱 Gmail 中的蓝色，只需将颜色从 #000000 更改为 #000001。 Gmail 将所有黑色链接变为蓝色。

【讨论】：

在标题中字面意思是 Outlook :)

【参考方案3】：

您不应在电子邮件模板中使用内联或其他样式。不推荐使用的代码是当天的顺序，并且通过（不）正确地在链接本身周围应用字体颜色声明来避免字体上的下划线，即使它已经在周围文本的字体声明中。示例：

<font face="Arial, Helvetica, sans-serif" color="#ffffff" size="2">Some non link text here followed by <a href="http://www.yourlink.com" target="_blank"><font color="#ffffff"><u><em>the text for the link here surrounded by the font style specifically for the link</em></u></font></a> irrespective of the text that surrounds it</font>

享受。为了满足所有电子邮件客户端的要求，HTML 电子邮件的构建方式非常落后。

【讨论】：

不管它的弃用程度如何......它似乎是唯一适用于 2020 年 android 版 Outlook 的东西。也适用于 Android 版 Gmail。万岁！

【参考方案4】：

实际上，inline-styles 是设置文本样式的唯一方法，但最好的方法是多次声明它。使用上面提到的 FONT-tag 并不适用于所有电子邮件客户端。

在 HTML 电子邮件中使用 FONT-tag 的正确方法：

<font face="Arial, Helvetica, sans-serif" size="1" color="#333333" style="font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#333333">Example of styled text.</font>

设置文本样式的最佳方式是：

<table cellpadding="0" cellspacing="0" border="0" align="center" >
  <tr>
    <td  bgcolor="#ffffff" align="left" style="font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#333333;">
      <a href="#" style="color:#333333; text-decoration:underline;"><span style="color:#333333;">Example of styled linktext.</span></a>
    </td>
  </tr>
</table>

我在 head 中添加了一个额外的样式，它适用于 Outlook（但不适用于 Gmail）：

<style type="text/css">
  a, a:link, a:visited  color:#333333; 
</style>

【参考方案5】：

更新：此答案在 2012 年撰写本文时是正确的，但似乎不再有效。

使用带有style 属性的<span> 标记来包装您的文本。

您还应该使用<font> 来格外小心。

例如：

<a style="color:#E3A216; text-decoration:none;">
  <span style="color:#E3A216;">
    <font color="#E3A216">
      Click me
    </font>
  </span>
</a>

【讨论】：

这不起作用。 Gmail 会从所有锚点中剥离样式并将其移动到嵌套跨度。

当您使用常规单词上的链接时，它可以工作，但如果您使用域名或电子邮件地址作为可读文本（所以不仅仅是作为链接在一个单词后面），它仍然会以蓝色打印。

@cptstarling 如果是电子邮件地址，请使用您的自定义样式将其包装在<a href="mailto:...">...</a> 中，Outlook 将不再接触它。同样适用于电话号码，但您使用 tel: 而不是 mailto:。

【参考方案6】：

Outlook 中的一个已知错误是，如果锚标记不包含有效 URL，则定义的样式可能会被忽略。

【参考方案7】：

否 - 不要使用字体标签。字体标签的呈现方式从一种电子邮件客户端-互联网浏览器组合到另一种不同。你可以测试一下。

火狐-雅虎 Internet Explorer-雅虎

字体标签的变化：

不同的行高

不同的字间距

为避免这种情况，请始终使用<span style=font-family: or <td style=font-family: ..

还有

修复 Outlook 和其他电子邮件客户端：

<a href="#" style="color:#735a29 !important; text-decoration:none !important; "><span style="color:#735a29; text-decoration:none;>LINK
</span></a>

在这种情况下，outlook 会忽略 !important，但网络电子邮件客户端不会。这就是为什么我们应该在 .. 防弹技术上一次又一次地重复相同的 CSS 声明！

【讨论】：

您在 SPAN 样式上缺少一个 "。:)

【参考方案8】：

我不记得我在哪里找到了这个解决方案，但我将以下 CSS 放在了我的电子邮件的 <head> 中（当然包含在 <style> 标记中。

/*outlook links visited state fix*/
span.MsoHyperlink  mso-style-priority:99; color:inherit; 
span.MsoHyperlinkFollowed  mso-style-priority:99; color:inherit; 

【讨论】：

@Cyntech 谢谢。我更新了我现在使用的解决方案。

【参考方案9】：

我把这个问题搞得一团糟，但我找到了一个很好的解决方案。

假设您想让链接变成红色，并且没有针对悬停情况的特殊样式：

a:linkcolor: red
a:visitedcolor: red
a:hovercolor: red
a:activecolor: red

如果您错过了这 4 条语句中的任何一条或以其他顺序进行，这可能会导致您的链接样式不起作用。它也适用于 gmail 客户端。