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

Posted 2023-02-24

【中文标题】如何删除 HTML 电子邮件中的链接下划线？

【英文标题】：How do I remove link underlining in my HTML email?

【发布时间】：2012-02-18 09:08:56

【问题描述】：

<td  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 中它显示的链接带有下划线。

谁能帮我解决这个问题？

【问题讨论】：

Gmail，雅虎在显示时在电子邮件中采用自己的格式。这可能是原因。请检查您如何格式化 gmail、yahoo 电子邮件的文本装饰...但不要将您的帐户与样式表一起使用..

尝试在 Dragonfly/Firebug/Chrome 检查器中查看应用的样式，看看是什么覆盖了您的 text-decoration: none 样式。

你可以尝试添加不同的颜色，在这里说#777777，看看它是否有效？我试图破译这个问题，因为你有解决办法。

您提供的代码应该可以在 Gmail、Hotmail 和 Ymail 中使用，这让我认为您的 HTML 在其他地方一定有问题，这会产生副作用。尝试用尽可能少的代码生成错误，看看是否能帮助你解决它。

这是我做过的最糟糕的工作（处理 html 电子邮件）。上帝保佑你男孩：D

【参考方案1】：

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

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

【讨论】：

Mailchimp 用户在这里，它就像一个魅力（用 Gmail 测试）。谢谢！

我在这个答案后 6 年才来到这里，它确实有效！我很惊讶！ ?

【参考方案2】：

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

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

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

【讨论】：

虽然所有客户端都支持文本修饰，但奇怪的是它不起作用。

【参考方案3】：

经过半天的研究（以及这个问题被打开后 2 年），我相信我已经找到了一个全面的答案。

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

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

【讨论】：

当我看到这个答案时我很怀疑，但这实际上解决了我在 GMail 中的问题。 text-decoration: none !important 只是没有削减它。这确实删除了下划线。投赞成票！

你确定这不是因为它是一个空链接？

这种方法对我有用，而最常见的方法却没有。

【参考方案4】：

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

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

【讨论】：

那是因为 Outlook 剥离了 !important

Outlook 不仅会剥离 !important，还会剥离与其连接的样式。在 Outlook 中，这将被解析为 <a href="#" style="">BOOK NOW</a>，实际上什么都不做。

【参考方案5】：

另一种欺骗 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 的解决方法，请你帮我尝试这个线程中的所有内容都没有工作。

谢谢

【参考方案6】：

我认为，如果您在 <a> 标记后加上 text-decoration:none 的 span 样式，它将适用于大多数浏览器/电子邮件客户端。

如：

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

【讨论】：

所有点赞的人，你真的尝试过吗？它不起作用。 标签仍然有下划线；它看起来和 BANANA 没有什么不同。

这在 Office 2010 中通过运行 windows 7 和 windows XP 的并行运行（没有锚声明）。但是，锚标记样式的 text-decoration 声明是不必要的。请注意，如果您将!important 添加到跨度的声明中，这似乎在许多情况下都不起作用，否则它会按需要执行

【参考方案7】：

我在适用于 Outlook 和 gmail 应用程序的 a href 上添加了两个声明。 Outlook 忽略了 !important 并且 gmail 需要它。 Web 版本的电子邮件可以同时使用。

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

【参考方案8】：

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

【讨论】：

终于成功了！谢谢老兄，Windows Mail 忽略了除此解决方案之外的所有内容

【参考方案9】：

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

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

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

第二个颜色<span> 是按钮文本的颜色。 （这里是白色的）

【参考方案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>

这个对我有用。

【参考方案11】：

我使用了在 google 中不显示链接、为 mso (outlook) 添加链接和 shy 标签的组合，以保持我公司的外观和感觉。一些代码可能是多余的（对于我的公司来说，外观比可点击部分更重要。（感觉就像一个拼图，因为每次更改都会刹车）

<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&shy;.&shy;immothekerfinotheker&shy;.&shy;be
<!--[if gte mso 9]>
</a>
</span>
<![endif]-->
</td>

希望这对某人有所帮助

【参考方案12】：

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

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

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

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

注意：不要使用 CSS cmets 作为 YAHOO!Mail 可能会引起麻烦。

2. 在保存方面，将与您所做的相同的代码内联到 A 标记中，并添加一个额外的 span 标记（标记中的样式规则经常被删除）

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

【参考方案13】：

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

展望 2007/10/13 + 展望 2000/03 苹果 iPhone/iPad Outlook.com 苹果邮件 4 雅虎！邮件测试版

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

【讨论】：

最新的 Outlook 文本装饰错误：无

【参考方案14】：

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

【参考方案15】：

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

【参考方案16】：

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

例子：

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

【参考方案17】：

在查看 html 电子邮件时，尝试检查该链接上的元素并查看覆盖它的内容。使用该类并在您的头部样式中再次定义该样式并定义 text-decoration: 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;
   

【参考方案18】：

类似下面几行的代码在 Gmail 网络客户端中为我工作。电子邮件中出现了一个没有下划线的黑色链接。我没有使用嵌套的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>

【参考方案19】：

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

【参考方案20】：

在 Windows 10 Mail 中，您可能需要在 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;' 修复了下划线问题:)

【参考方案21】：

你所要做的就是：

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

【讨论】：

哇哦？字母间距在这方面有何帮助？

【参考方案22】：

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

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

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

【参考方案23】：

你应该这样写。

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

【讨论】：

哦，现在已编辑。但问题不是这样发布的。

也许<a href="#" style="text-decoration:none !important;">BOOK NOW</a> 有效？

问题是这样发布的-这里是first question version