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标记将过度规则基于Web的电子邮件客户端的默认样式，因此不会留下下划线。

Answer 2

我看到这已得到回答;但是，我觉得这个链接提供了各种电子邮件客户端支持的格式的适当信息。

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

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

Answer 3

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

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

Answer 4

我认为，如果您在<a>标记后添加范围text-decoration:none，则可以在大多数浏览器/电子邮件客户端中使用。

如：

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

Answer 5

经过半天考察（以及此问题开启后的2年），我相信我已经找到了一个全面的答案。

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

（您需要链接内的span上的text-underline属性和用于编辑颜色的font标签）

Answer 6

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

404-835-9421 - ＆gt; 404〜835〜9421

它会拯救你（或不太精明的用户;-)沿着html小道行走。

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

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

这对我有用，希望它能帮助那些仍然无法取出前景链接下划线的人。如果有人有一个gmail的解决方法，请你帮我试一下这个帖子中的所有内容都没有用。

由于

Answer 7

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

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

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

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

注意：不要使用CSS评论作为YAHOO！邮件可能会造成麻烦。

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

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

Answer 8

我在outlook和gmail应用程序中使用的href上添加了两个声明。 outlook忽略了！important和gmail需要它。网络版的电子邮件可与两者兼有。

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

Answer 9

我在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>

希望这有助于某人

Answer 10

彻底＆＃34;隐藏＆＃34;在邮件应用程序和Web浏览器中为<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>中的颜色是按钮文字的颜色。（白色在这里）

Answer 11

Windows Mail似乎完全忽略了内联project()标记，但为我解决的问题是将其添加到头部：

g.V('<id>').
  inE('RELATION').
  project('x','y','z','p','q','r').
    by(inV().values('x')).
    by(inV().values('y')).
    by(inV().values('z')).
    by(outV().values('p')).
    by(outV().values('q')).
    by(outV().values('r'))

Answer 12

在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;}'解决了下划线问题：）

Answer 13

文字装饰没有对我不起作用，然后我在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 14

我复制了我的html页面并粘贴到了单词上。编辑了单词中的签名，删除了下划线所在的空格，并使我自己的“填充”按下空格键。再次复制并粘贴到Outlook 2013。工作得很好。

Answer 15

以下代码的代码在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 16

在查看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;
}

Answer 17

你可以做＆＃34;多余的造型＆＃34;这应该解决问题。您使用与之相同的样式，但将其添加到。

中

示例：

<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

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

Answer 19

使用 text-decoration:none !important; 代替 text-decoration:none; ，以确保“丢失”下划线。

Answer 20

完全取决于电子邮件客户端是否要在链接下显示下划线。截至目前，身体中的风格仅受以下支持：

Outlook 2007/10/13 +
Outlook 2000/03
Apple iPhone / iPad
Outlook.com
Apple Mail 4
雅虎！邮件测试版

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

Answer 21

所有您需要做的是：

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

Answer 22

你应该写这样的东西。

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

Answer 23

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

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

values = {float[16]@4883}
  0 = 8.399E-41
  1 = 5.241E-42
  2 = 5.13235E-40
  3 = 5.255E-42
  4 = 0.0
  5 = 0.0
  6 = 0.0
  7 = 0.0
  8 = 0.0
  9 = 0.0
  10 = 0.0
  11 = 0.0
  12 = 0.0
  13 = 0.0
  14 = 0.0
  15 = 0.0

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

23 个答案: