【发布时间】：2020-08-19 06:57:47
【问题描述】：
我正在努力寻找一种解决方案来删除从 Outlook（Outlook for Office 365）发送到 Gmail（桌面版）的电子邮件链接中的蓝色下划线
生成的 html 在 Google Chrome 上完美运行，但在 Gmail 上却不行
这是我的测试的完整代码： 它是用 mjml 框架生成的：
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>
</title>
<!--[if !mso]><!-- -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#outlook a {
padding: 0;
}
body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
p {
display: block;
margin: 13px 0;
}
</style>
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<!--[if lte mso 11]>
<style type="text/css">
.mj-outlook-group-fix { width:100% !important; }
</style>
<![endif]-->
<!--[if !mso]><!-->
<!--<![endif]-->
<style type="text/css">
@media only screen and (min-width:480px) {
.mj-column-per-100 {
width: 100% !important;
max-width: 100%;
}
}
</style>
<style type="text/css">
<!-- Override Gmail blue links
-->
.ii
a[href]
{
text-decoration:
none;
color:
inherit
!important;
}
.link-nostyle
{
color:
inherit;
text-decoration:
none
}
.link-underlined
{
color:
inherit;
text-decoration:
underline
!important;
}
.link-not-underlined
{
color:
inherit;
text-decoration:
none
!important;
text-decoration-color:
transparent;
color:
green;
}
.myClass,
.myClass1
{
text-decoration:
none
!important;
color:
orange;
;
</style>
</head>
<body>
<div style>
<!--[if mso | IE]>
<table
align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
class="" style="vertical-align:top;width:600px;"
>
<![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:helvetica;font-size:20px;line-height:1;text-align:left;text-decoration:none;color:#F45e46;">Hello <a href="https://mjml.io" class="link-nostyle" style="color: inherit; text-decoration: none;">Hello World</a></div>
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo odio impedit minus suscipit, quis autem nulla aliquam maxime optio facere, esse quia corrupti possimus expedita aspernatur modi molestiae, iusto dolore. <a style="text-decoration: underline !important; color: orange !important;" href="https://www.google.com"><span style="text-decoration: underline !important; color: red !important;">Test link 2</span></a>
<a style="text-decoration: none !important; color: #00d0ff !important;" href="https://www.google.com"><span style="text-decoration: none !important; color: green !important;">Test link 2</span></a></div>
</td>
</tr>
<!-- Link underlined -->
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;">Hello <a href="https://mjml.io" class="link-underlined" style="color: #f5b33c; text-decoration: underline !important;"><span style="text-decoration: underline !important;">link underlined</span></a></div>
</td>
</tr>
<!-- Link NOT underlined -->
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;text-decoration:none;color:#000000;">Hello <a href="https://mjml.io" class="link-not-underlined">link not underlined</a></div>
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"><a style="text-decoration: none !important; color: #00d0ff !important;" href="https://www.google.com"><span style="text-decoration: none !important; color: green !important;">Test link 3</span></a>
<br><br> lorem Ipsum <a href="http://www.google.com" target="_blank" style="color: red !important; text-decoration:none !important;">
<span style="color:red !important; text-decoration:none!important;">Getting Started with Our Services</span>
</a>
<br><br>
<a href="https://www.google.com" target="_blank" style="color:#CCCCCC; text-decoration:none;">
<color="#cccccc">test 4 </color="#cccccc">
</a>
<div class="myClass"> <a href="mailto:info@example.com">
<span class="myClass1">info@ccc.com </span></a> </div>
</div>
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;">Test for numbers: 0711 12345678</div>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</div>
</body>
</html>我已经尝试了这篇文章的全部建议： How to Remove Hyperlink underline in Gmail while sending Email template from outlook没有成功
【问题讨论】：
-
Gmail 网站做了很多剥离 os CSS。您可能可以让它工作，但在其他应用程序中它可能看起来很傻。 litmus.com/blog/how-to-fix-blue-links-in-gmail
-
从电子邮件客户端（Outlook、Gmail 等）发送 HTML 电子邮件通常会出现问题。每个客户端都倾向于以自己的“特殊”方式更改 HTML。您可以考虑使用电子邮件服务提供商发送电子邮件；你可以找到一个永远不会改变你的 HTML 的。 （当然，您可以将您从 ESP 收到的 HTML 与您要求他们发送的 HTML 进行比较。）您可以通过 putsmail.com 发送电子邮件的免费测试（不要使用内联 CSS 选项）。祝你好运。
标签： email templates outlook gmail mjml