HTML 电子邮件链接颜色困境

Question

I designed an HTML email and I am having the following issues: First my entire design is based on a blue color so any blue text will not be readable by the reader/user, text has to be white. GMAIL automatically color phone numbers and links blue but the main problem is Microsoft Outlook OWA.

To fix the phone number and link coloring in GMAIL I did the following:

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

This works perfectly for GMAIL and every where else BUT as I mentioned most of my client uses Outlook or MS OWA (Outlook Web Application).

OWA ignores the color I set in my inline style and makes the link default blue; this only happens when the email is previewed. If you actually open the email all the styles kicks in.

My dilemma is, what should I do? I have already given up hope but this is my last resort. Is there a way to override the link color for Outlook OWA? I have used !IMPORTANT, the FONT tag, NESTING to the 5 degree.

The Problem here is not Outlook but OWA.

Here is a screenshot when I inspect the element in Chrome:

And here is FF:

Any ideas?

Please!

Answer 1

You'll find success by including the <font> declaration, which is deprecated in modern HTML, though some versions of OWA still respect it:

<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 Web App (OWA) link colors change from inline styles. I have spent a few hours trying to change/fix link colors in OWA where it strips away inline styles for email templates I am creating. I tried various techniques with + tags with no success. Finally found something that seems to work:

      <a href="http://www.somewebsite.com.au/" target="_blank" style="color:#FFFFFF;">White Link</a>

Changed it to:

      <a href="http://www.somewebsite.com.au/" target="_blank" style="color:#FFFFF6;">White Link (almost)</a>

Seems fine so far.

Further testing. I put the slightly off color on the the <td style="color:#FFFFF6;"> then the correct color on the <a href="http://www.somewebsite.com.au/" target="_blank" style="color:#FFFFFF;">

Answer 3

Its a known bug with Outlook that if an anchor tag does not contain a valid URL, then the styling of said tag will be ignored.

The tendancy to add !important will also work against you in this case because Outlook will completely ignore any tags suffixed with !important.

Put a URL on your anchor tag, or wrap the text in a span tag inside of the anchor and put your styling there.

Answer 4

I have been able to fix this by putting a table inside the a tag.

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

Answer 5

Figures. Just when we've gotten used to not being able to use the cool new email tricks because Outlook doesn't support them, Microsoft throws OWA at us, with a whole slew of new bugs.

We've gotten around its awful link styling by applying a display:inline-block to the link. This at least gets rid of the underline. I have no idea why.

We ran into another bug when trying to style our links the same color as the parent element. For some reason, making the parent element's color different fixed it. Changing it by one character up or down usually gives you a pretty close color.

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

Answer 6

I used the following and it worked fine in Outlook 2007, 2010, 2013, and Outlook.com. I will check with OWA soon.

#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

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

it worked for me! Make sure to use <strong> , I tried it with other tags, but that didn't work.

Answer 8

I have also noticed that for OWA the order of items in the style= property might be relevant. I've seen cases when using:

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

Would cause OWA to strip the color attribute (but leave `text-decoration), but reversing the order, eg:

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

Would make OWA preserve both. I can't see any sense in this, but this is how it is...

I've also see that the context of a tag can influence this style-stripping: The stripping I mentioned above is triggered when the a tag is preceded by a h2 tag, but removing that h2 also prevents OWA from stripping the tag (I haven't investigated when or why this happens exactly, though, just wanted to point out that context can be relevant here as well).

I realize that none of this is a direct answer to the original question, but I imagine it will be helpful for others who come here with a similar question.

Answer 9

OWA is actually stripping all the styles of the a-tag, including that of the span-tag you included. You can add styles in the head part, but again, OWA is ignoring this for hyperlinks. I added a style for a, a:link, a:visited in the head, the same color as in the a-tag and the including span-tag. The result? My linktext is colored but the underlining is still the default blue. The clue: there's no clue for me.

Answer 10

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 11

Try adding a class my-link to each link in question and the following CSS in your style tag:

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

That usually covers things for me. If that fails, there is a heavier version of this code here:

.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

Answer 12

I saw this thread and tried the options above. The TD hack worked with changing the hex code, but I just stumbled upon a nice solution if anyone would like to try:

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

Setting the DIV to text-decoration NONE was supported by OWA. I personally was asked to remove the underline, so for my case it's perfect.

I hope people find this useful. Thanks for everyone who added their solutions as well.

Answer 13

This question is still relevant as of today 21-12-2017. I had no problem with my code in Outlook, Gmail but not in Outlook Web App. I had to use this outdated tag to solve it.

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

It was weird that style within hyperlink will NOT work for Outlook Web App(OWA), therefor, adding <font color="#ff6600 !important;"> worked! Strange but this is how Microsoft wants to tease us!

Answer 14

**

PSEUDO CSS SUPPORTED (2007, 2010, 2016, 2017 and others)

It is like a hack because it doesn't support.

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