HTML 电子邮件链接颜色困境
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12025376/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML email link color dilemma
提问by Asynchronous
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.
我设计了一个 HTML 电子邮件，但遇到以下问题：首先，我的整个设计基于蓝色，因此读者/用户无法读取任何蓝色文本，文本必须为白色。GMAIL 会自动将电话号码和链接着色为蓝色，但主要问题是 Microsoft Outlook OWA。
To fix the phone number and link coloring in GMAIL I did the following:
为了修复 GMAIL 中的电话号码和链接颜色，我执行了以下操作：
<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).
这对于 GMAIL 和其他所有地方都非常有效，但正如我提到的，我的大多数客户都使用 Outlook 或 MS OWA（Outlook Web 应用程序）。
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.
OWA 忽略我在内联样式中设置的颜色，并将链接设为默认蓝色；这仅在预览电子邮件时发生。如果您真的打开电子邮件，所有样式都会出现。
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.
我的困境是，我该怎么办？我已经放弃了希望，但这是我最后的手段。有没有办法覆盖 Outlook OWA 的链接颜色？我使用了 !IMPORTANT，FONT 标签，NESTING 到 5 度。
The Problem here is not Outlook but OWA.
这里的问题不是 Outlook，而是 OWA。
Here is a screenshot when I inspect the element in Chrome:
这是我在 Chrome 中检查元素时的屏幕截图：
And here is FF:
这是FF：
Any ideas?
有任何想法吗？
Please!
请！
回答by estaples
You'll find success by including the <font>declaration, which is deprecated in modern HTML, though some versions of OWA still respect it:
您将通过包含<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>
回答by Kerry Smyth
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:
Outlook Web App (OWA) 链接颜色从内联样式更改。我花了几个小时试图更改/修复 OWA 中的链接颜色，它去除了我正在创建的电子邮件模板的内联样式。我尝试了各种带有 + 标签的技术，但没有成功。终于找到了一些似乎有效的东西：
<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;">
进一步测试。我把稍微偏离的颜色放在<td style="color:#FFFFF6;">然后正确的颜色上<a href="http://www.somewebsite.com.au/" target="_blank" style="color:#FFFFFF;">
回答by davidcondrey
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.
Outlook 的一个已知错误是，如果锚标记不包含有效的 URL，则该标记的样式将被忽略。
The tendancy to add !important will also work against you in this case because Outlook will completely ignore any tags suffixed with !important.
在这种情况下，添加 !important 的倾向也会对您不利，因为 Outlook 将完全忽略任何以 !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.
在锚标签上放置一个 URL，或者将文本包裹在锚内的 span 标签中，并将您的样式放在那里。
回答by kavun
I have been able to fix this by putting a table inside the atag.
我已经能够通过在a标签内放置一张桌子来解决这个问题。
<a href="">
<table>
<tr>
<td style="color: #FFFFFF">Link text here</td>
</tr>
</table>
</a>
回答by Bill Malcolm
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.
数字。正当我们因为 Outlook 不支持而习惯了无法使用很酷的新电子邮件技巧时，Microsoft 向我们抛出了 OWA，其中包含大量新错误。
We've gotten around its awful link styling by applying a display:inline-blockto the link. This at least gets rid of the underline. I have no idea why.
我们通过display:inline-block对链接应用 a来解决其糟糕的链接样式。这至少摆脱了下划线。我不知道为什么。
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>
回答by Orlando Rodriguez
I used the following and it worked fine in Outlook 2007, 2010, 2013, and Outlook.com. I will check with OWA soon.
我使用了以下内容，它在 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>
回答by curious.netter
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.
截至今天 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>
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!
奇怪的是，超链接中的样式不适用于 Outlook Web App（OWA），因此，添加<font color="#ff6600 !important;">工作！奇怪，但这就是微软想要取笑我们的方式！
回答by leon
<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.
它对我有用！确保使用<strong>，我尝试使用其他标签，但没有用。
回答by Vinod Kumar
**
**
PSEUDO CSS SUPPORTED (2007, 2010, 2016, 2017 and others)
支持伪 CSS（2007、2010、2016、2017 等）
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>
回答by Ted Goas
Try adding a class my-linkto each link in question and the following CSS in your styletag:
尝试my-link为每个有问题的链接添加一个类，并在您的style标签中添加以下 CSS ：
.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;
}
