如何删除 HTML 电子邮件中的链接下划线？

Question

<td width="110" align="center" valign="top" style="color:#000000;">
    <a href="https://example.com" target="_blank"
       style="color:#000000; text-decoration:none;">BOOK NOW
    </a>
</td>

我使用此代码在我的 HTML 电子邮件中创建了一个链接。在浏览器和 Outlook 中，它运行良好，但在 GMail、Hotmail 和 ymail 中，它会显示带下划线的链接。

谁能帮我摆脱这个？

Answer 1

<a href="#" style="text-decoration:none !important; text-decoration:none;">BOOK NOW</a>

Outlook 将删除带有 !important 标记的样式，保留常规样式，因此没有下划线。 !important 标签将覆盖基于网络的电子邮件客户端的默认样式，因此不会留下下划线。

Answer 2

我看到这个问题已经得到解答；但是，我认为此链接提供了有关各种电子邮件客户端支持的格式的适当信息。

http://www.campaignmonitor.com/css/

值得注意的是，GMail 和 Outlook 是其中的两个最挑剔的 HTML 电子邮件格式。

Answer 3

经过半天的研究（自这个问题提出以来已有两年），我相信我已经找到了一个全面的答案。

<a href="#"><font color="#000000"><span style='text-decoration:none;text-underline:none'>Link</span></font></a>

（您需要链接内跨度上的 text-underline 属性和字体标签来编辑颜色）

Answer 4

Windows Mail 似乎完全忽略了内联 text-decoration 标签，但对我来说解决这个问题的方法是将其添加到头部：

<!--[if (mso)|(mso 16)]>
<style type="text/css">
    body, table, td, a, span { font-family: Arial, Helvetica, sans-serif !important; }
    a {text-decoration: none;}
</style>
<![endif]-->

Answer 5

在文本修饰规则中使用 !important。

<a href="#" style="text-decoration:none !important;">BOOK NOW</a>

Answer 6

另一种欺骗 Gmail（电话号码）的方法：使用
〜而不是
-

404-835-9421 --> 404~835~9421

它将帮助您（或不太精明的用户;-）沿着 html 通道前进。

我找到了另一种方法来删除迄今为止我测试过的 Outlook 中的链接。例如，如果您在 css 中创建一个空白类，例如 .blank {}，然后对您的链接执行以下操作：

<a href="http://www.link.com/"><span class="blank" style="text-decoration:none !important;">Search</span></a>

这对我有用，希望它能帮助那些仍然无法在 Outlook 中取出链接下划线的人。如果有人有 Gmail 的解决方法，请帮我尝试一下这个线程中的所有内容，但没有任何效果。

谢谢

Answer 7

我认为，如果您在带有 text-decoration:none 的 标记后面放置一个 span 样式，它将在大多数浏览器/电子邮件客户端中工作。

如：

<a href="" style="text-decoration:underline">
    <span style="color:#0b92ce; text-decoration:none">BANANA</span>
</a>

Answer 8

我在 a href 上添加了这两个声明，这些声明适用于 Outlook 和 Gmail 应用程序。 Outlook 会忽略 !important，而 Gmail 需要它。电子邮件的网络版本可以同时使用。

text-decoration: none !important; text-decoration: none;

Answer 9

要在邮件应用程序和网络浏览器中完全“隐藏” 的下划线，可以执行以下巧妙的方法。

<a href="..."><div style="background-color:red;">
    <span style="color:red; text-decoration:underline;"><span style="color:white;">BUTTON</span></span>
</div></a>

1. 第一个 中的颜色是您不需要的颜色，必须设置为与背景颜色相同。 （此处为红色）

2. 第二个中的颜色是按钮文本的颜色。 （此处为白色）

Answer 10

文本装饰没有一个对我不起作用，然后我在 Outlook 中发现一封没有该行的电子邮件并检查了代码：

<span style='font-size: 12px; font-family: "Arial","Verdana", "sans-serif"; color: black; text-decoration-line: none;'>
<a href="http://www.test.com" style='font-size: 9.0pt; color: #C69E29; text-decoration: none;'><span>www.test.com</span></a>
</span>

这个对我有用。

Answer 11

我使用了不在谷歌中显示链接、添加 mso（outlook）链接和害羞标签的组合，以保持我公司的外观和感觉。有些代码可能是多余的（对于我的公司来说，外观比可点击的部分更重要。（感觉就像拼图，因为每次更改都会制动其他东西）

<td style="color:rgb(69, 54, 53)">
<!--[if gte mso 9]>
<a href="http://www.immothekerfinotheker.be" style="text-decoration:none;">
<span style="text-decoration:none;">
<![endif]-->
www­.­immothekerfinotheker­.­be
<!--[if gte mso 9]>
</a>
</span>
<![endif]-->
</td>

希望这对某人有帮助

Answer 12

所有电子邮件客户端都会调整您提供的 HTML 和 CSS 代码
他们自己的规则：

例如：gmail 删除除 body 标记的内部 HTML 之外的所有内容。

1. 对于大多数其他客户端，您可以在标头中添加样式标签

<style type="text/css">
    a {text-decoration: none !important;}
</style>

注意：不要使用 CSS 注释，因为 YAHOO!Mail 可能会造成麻烦。

2.为了保存，将相同的代码内联添加到A标签中，就像你所做的那样，以及一个额外的span标签（标签中的样式规则经常被删除）

<a href="" style="text-decoration: none !important;">
    <span style="text-decoration: none !important;">
        text
    </span>
</a>

Answer 13

在 Windows 10 邮件中，您可能需要在 html 头部添加这些内容：

<!--[if (mso)|(mso 16)]>
  <style type="text/css">
    body, table, td, a, span { font-family: Arial, Helvetica, sans-serif !important; }
    a {text-decoration: none;}
  </style>
<![endif]-->

'a {text-decoration: none;}' 修复了下划线问题:)

Answer 14

这完全取决于电子邮件客户端是否要在链接下显示下划线。截至目前，正文中的样式仅支持：

• Outlook 2007/10/13 +
• Outlook 2000/03
• Apple iPhone/iPad
• Outlook.com
• Apple Mail 4
• Yahoo!邮件测试版

http://www.campaignmonitor.com/css/

Answer 15

使用 text-decoration:none !important; 而不是 text-decoration:none; 来确保您“失去”下划线。

Answer 16

在 http://www.campaignmonitor.com/css/ 中，一个很好的解释是受限制的！这是一个非常好的指南，帮助您了解电子邮件客户端中 CSS 的所有限制。

Answer 17

您可以执行“冗余样式”，这应该可以解决问题。您可以使用与 中相同的样式，但将其添加到 中的 中。

例子：

<td width="110" align="center" valign="top" style="color:#000000;">
    <a href="https://example.com" target="_blank"
       style="color:#000000; text-decoration:none;"><span style="color:#000000; text-decoration:none;">BOOK NOW</span></a>
</td>

Answer 18

查看 html 电子邮件时，尝试检查该链接上的元素，看看是什么覆盖了它。使用该类并在您的头部样式中再次定义该样式并定义文本装饰：none !important;

就我而言，这些类会覆盖我的内联样式，因此在我的 html 电子邮件的头部声明了这一点，并定义了我想要实现的样式。

它对我有用，希望对你也有用。

.ii a[href]{
text-decoration: none !important;
}

#yiv8915438996 a:link, #yiv8915438996 span.yiv8915438996MsoHyperlink{
text-decoration: none !important;
}   

#yiv8915438996 a:visited, #yiv8915438996 span.yiv8915438996MsoHyperlinkFollowed{
text-decoration: none !important;
}   

Answer 19

下面的代码在 Gmail Web 客户端中对我有用。电子邮件中出现了一个无下划线的黑色链接。我没有使用嵌套的 span 标签。

<table>
  <tbody>
    <tr>
        <td>
            <a href="http://hexinpeter.com" style="text-decoration: none; color: #000000 !important;">Peter Blog</a>
        </td>
    </tr>
  </tbody>
</table>

注意：Gmail 将删除任何不正确的内联样式。例如，如下行代码将其内联样式全部删除。

<a href="http://hexinpeter.com" style="font-family:; text-decoration: none; color: #000000 !important;">Peter Blog</a>

Answer 20

我复制了 html 页面并粘贴到 word 中。
在word中编辑签名，删除放置下划线的空格，并按空格键制作我自己的“填充”。
再次复制并粘贴到 Outlook 2013。
对我来说效果很好。

Answer 21

就我而言，我使用 Safari 配置了签名（在 Gmail 中复制并粘贴）。我尝试了您放在这里的所有代码，但这些代码不起作用。使用 Safari 粘贴签名后，您可以返回 Chrome，下划线就会消失。

Answer 22

在元素样式内使用text-decoration: unset;适用于GMAIL

Answer 23

只需使用以下 css 即可避免锚标记默认 css 样式：

.ii a[href], a {
        color: inherit !important;
        text-decoration: none !important;
    }

Answer 24

我尝试了上面所有的解决方案，但没有任何效果。我将一张卡片包裹在锚标记内，无论我做什么，卡片内的文本总是带有下划线。所以我所做的就是用锚标记将卡片内的每个文本包裹起来，并分配 text-decoration: underline; text-decoration-color: #FFFFFF; 锚标记的样式。因为 #FFFFFF 是卡片的背景颜色，下划线也消失了。

<a
    style="
        text-decoration: underline;
        text-decoration-color: #FFFFFF;
    "
>
    BOOK NOW
</a>

如果 #FFFFFF 不是您的背景颜色，请将其更改为您需要的任何颜色。

Answer 25

您所要做的就是：

<a href="" style="text-decoration:#none; letter-spacing: -999px;">

Answer 26

将“a href”标签放置在文本的 div / span 之前，不带任何样式。
然后在 div/span 标签中设置样式。

对于样式最受限制的电子邮件客户端。

<div><a href=""><span style="text-decoration:none">title</span><a/></div>

Answer 27

你应该写这样的东西。

<a href="#" style="text-decoration:none;">BOOK NOW</a>