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?

提问by C-g

I've been using the HTML email templates that I obtained from http://www.campaignmonitor.com/templates/And on every example I have gone through, when I send an email using the HTML template, all the links are given the horrible default blue underline. The emails are being sent using Outlook 2007 and when they are viewed in Outlook they are fine. However, in Hotmail and Gmail, this blue underline persists regardless of what color the text is.

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

I've tried inline styling of the a tag like so:

我已经尝试过 a 标签的内联样式，如下所示：

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

If I use the exact same HTML email template code and send it from my hotmail account to another hotmail account it works perfectly. So, to me this is an Outlook 2007 issue.

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

I was able to dissect the html that outlook sends to the hotmail recipient and found that Outlook attaches a stylesheet on top of the HTML code. This is what it sends:

我能够剖析 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 seems to be setting the values for the a tag, but my inline styling doesn't appear to be overwriting what Outlook is adding to the email.

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

I've tried creating a stylesheet in the head section, and even in the body section, but this does nothing.

我试过在头部部分，甚至在正文部分创建一个样式表，但这没有任何作用。

Does anyone know a fix for this? I either want rid of the underline, or even just have the underline display in the color I have specified for links.

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

Thanks to anyone who can help.

感谢任何能提供帮助的人。

回答by Alex

Update: This answer was correct at the time of writing in 2012 but doesn't seem to work anymore.

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

Wrap your text with a <span>tag with a styleattribute.

<span>用带有style属性的标签包裹你的文本。

You should also be using <font>to be extra careful.

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

For example:

例如：

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

回答by Katy

To get rid of the blue in Gmail just change the color from #000000 to #000001. Gmail makes all black links blue.

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

回答by Geert

Actually, inline-stylesare the only way to style your text, but the best way is to declare it several times. Using the FONT-tag as mentioned above doesn't do the trick for all email clients.

实际上，内联样式是为文本设置样式的唯一方法，但最好的方法是多次声明它。使用上面提到的 FONT-tag 并不能解决所有电子邮件客户端的问题。

The correct way to use the FONT-tagfor HTML emails:

为 HTML 电子邮件使用FONT 标签的正确方法：

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

The best wayto style your text, is by doing as this:

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

<table cellpadding="0" cellspacing="0" border="0" align="center" width="600">
  <tr>
    <td width="600" 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>

I put an extra style in the head, which apply in Outlook (but not in Gmail):

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

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

回答by Tony Hadley

You should not be using styles, inline or otherwise, in email templates. Deprecated code is the order of the day and the underline on the font is avoided by (in)correctly applying the font-colour declaration around the link itself, even if it is already inside a font declaration for the surrounding text. Example:

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

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

Enjoy. HTML emails are very backward in the way that they have to be constructed in order to satisfy all email clients.

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

回答by ajcw

If your problem is as simple as not being able to override the Outlook stylesheet you should try the !importantdeclaration with your inline styles, e.g.

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

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

回答by davidcondrey

It's a known bug in Outlook that if an anchor tag does not contain a valid URL, the styling defined will likely be ignored.

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

回答by josh1978

I don't remember where I found this solution, but I put the following CSS within the <head>of my emails (wrapped within a <style>tag of course.

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

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

回答by Lars Ljungqvist

I had an big mess with this problem but I found a fine solution.

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

Let's say that you want to make the link red with no special styling for a hover situation:

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

a:link{color: red}
a:visited{color: red}
a:hover{color: red}
a:active{color: red}

If you miss anyone of these 4 statements or make it in another order this might cause your link styling not to work. It works in a gmail client as well.

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

回答by user3408238

No - Don't use Font Tags. Font Tag render differently from one email client-internet browser combination to other. You can test it.

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

• Firefox-Yahoo
• Internet Explorer-Yahoo

• 火狐-雅虎
• Internet Explorer-雅虎

Changes in Font tags:

字体标签的变化：

• Different line heights

• Different character-word spacing

• 不同的行高

• 不同的字字间距

To avoid this, use always <span style=font-family: or <td style=font-family:..

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

Also

还

Fix for Outlook and other email clients :

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

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

In this case, outlook ignores !important, but web email clients don't. That's why we should repeat the same CSS declaration twice on and again on the .. bulletproof technique!

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