问题
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!
回答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>
回答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;">
回答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.
回答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>
回答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>
回答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>
回答7:
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.
回答8:
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.
回答9:
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
回答10:
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.
回答11:
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!
回答12:
<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.
回答13:
**
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>
来源：https://stackoverflow.com/questions/12025376/html-email-link-color-dilemma