Gmail是否会从邮件中删除链接颜色？

Question

除了链接颜色之外，一切都正常呈现。下面是我的链接。

<a href="http://www.facebook.com.." style="color:#000000;text-decoration:none;font-weight:bold">Facebook</a>

<a href="http://www.twitter.com/..." style="color:#000000;">Twitter</a>

然而，在Gmail中，这些链接会转换成这样。

<a href="http://www.facebook.com.." style="text-decoration:none;font-weight:bold">Facebook</a>

<a href="http://www.twitter.com/..." style="">Twitter</a>

好的，也许Gmail会为所有电子邮件做到这一点？我四处查看。有很多蓝色链接。然后我打开了一个YouTube消息。

<a target="_blank" style="color:#e12e31;font-family:arial,verdana,sans-serif;text-transform:uppercase;text-decoration:none" href="...">Play all »</a>

有点好奇...非常好奇。YouTube没有我遇到的这个问题。当发送HTML邮件时，有人能够修改Gmail中的链接颜色吗？你是怎么做到的？

- ComputerUser

Answer 1

我在Gmail中也遇到了类似的链接问题，但只有当颜色为 #000000 时，它会将其更改为默认蓝色。

我将颜色更改为深灰色后，问题得到解决。

- Vasco

---

同样的情况也会发生在 #ffffff - 但不会发生在 #fefefe。 - mgarciaisaia

Answer 2

GMail将把您的链接从黑色(#000000)改为默认蓝色，可能是作为反垃圾邮件功能。

要避免这种情况，只需将字体颜色更改为(#000001)，例如：

<a href="#" style="color: #000001;">Click HERE</a>

- crmpicco

Answer 3

将这里的答案组合起来对我非常有帮助，例如：

color: #000001 !important;

我希望我们在这里不要帮助垃圾邮件发送者等人...

- OZZIE

---

我确认 !important 关键字完美运作。 - sekmo

还确认了一下，它甚至可以在 head/style 标签中使用（2014-07）a {color:red !important;}。通过 Web 检查器快速查看后，发现自定义颜色已经声明，但 Gmail 的包装 div 样式覆盖了样式。!important 关键字解决了这个问题。 - GDmac

@ChrisMoschini 嗯...它只工作了6年..但感谢你的负评...(我还没有测试它现在是否不起作用) - OZZIE

@OZZIE 是的，StackOverflow有点奇怪，我的答案也遇到了同样的问题。但从积极的角度来看，我认为这是一种激励，鼓励我们更新优秀答案中的最新信息，当技术淘汰旧的、不正确的答案时。我的 .Net JPEGs 答案已经更新了6次。 - Chris Moschini

Answer 4

我为我的电子邮件签名做的事情是用中间点而不是破折号放置电话号码，像这样226·860·XXXX，不再有蓝色超链接！希望这能帮助到某人。

- laura

---

没有回答我的问题，但还是帮了我。 ;) - Mark

您还可以使用“零间隔”HTML实体​来避免iOS将任何数字（如增值税）转换为可点击的链接。只需在数字之间插入该字符即可打破这种iOS行为。 - bluantinoo

Answer 5

我可以通过在电子邮件头部添加以下样式来设置颜色链接：

<style>
      a, a:visited, .ii a[href] { color:#E5322C!important; text-decoration:none;}
      a:hover, .ii a[href]:hover{ text-decoration:underline;}
</style>

唯一的注意事项是“a”选择器不足，因为Gmail添加规则到.ii a [href]，但添加该选择器的规则可以解决我的链接颜色问题。它甚至适用于由Gmail转换成链接的URLS、电子邮件和电话号码。无需添加内联样式。

- bluantinoo

---

这在2015年可能是正确的，但在今天的Gmail中肯定行不通。 - Chris Moschini

这个完美地运作，甚至 a { color: #0371e8 !important; } 也能正常工作。 - Berend de Boer

Answer 6

最初的回答：很不幸，看起来这里所有的回答都是针对2016/2017年更新之前的旧版Gmail。这里提供的所有2016年之前的答案均无效。

在现代版的Gmail Web和Gmail for Android上，您需要通过设置背景颜色来欺骗Gmail，使其认为您正在尝试设置链接按钮样式：

a.btn {
  color: #fff;
  background: #ffa100;
  text-decoration: none;
  text-transform: uppercase;
  padding: 5px 12px 6px 12px;
  border-radius: 5px;
  box-shadow: 0 3px 6px rgba(0,0,0,.18);
}

对于好奇的人，它会变成这个样式，作为整个Gmail网页头部的最后一个style标签注入：

最初的回答：

.msg-6177286137221397679 a.m_-6177286137221397679btn{
    color:#fff;
    background:#ffa100;
    text-decoration:none;
    text-transform:uppercase;
    padding:5px 12px 6px 12px;
    border-radius:5px
}

这段内容与IT技术有关。"Original Answer" 的意思是“最初的回答”。如下：

这些样式都在一个被压缩的行里，与实际的Gmail中的其余样式一起；我已经将它们漂亮地打印出来以进行比较。你可以看到我的盒子阴影被去掉了，但这并没有使整个样式规则失效。你还可以看到一些其他重要的事情，每个人都说在Gmail中无法做到，但实际上不再是真的：

• 内边距有效
• 标签级别的样式有效——也就是说，它是一个.btn，而大多数Gmail建议您永远不要使用标签样式，只应用类级别的样式。

虽然像上面的链接按钮可能是Gmail希望的，但您可以通过以下方法欺骗它：

body {
    background: #ededed;
}
table.main a {
    color: #1c95cd;
    background: #ededed;
}

那就够了，你的链接颜色样式得以保留，因为Gmail天真地将其视为链接按钮。

- Chris Moschini

Answer 7

在 Web 版和 Android 版 Gmail 中对我有用的是：

<style>
  .button {
    border-radius: 0.2rem;
    background: #4888e8;
    color: #fefefe;
    font-weight: bold;
    display: inline-block;
    padding: 0.75rem 1rem;
  }
</style>

<p>
  <a class="button" href="https://some-url" style="color: #fefefe;">Join</a>
</p>

在 Gmail 网页版中，如果没有内联样式来设置颜色链接按钮，它们将会使用默认的蓝色。但在 Gmail 安卓版中，颜色会正确显示。

- Dmitry Sikorsky

Answer 8

你必须确保将代码插入到 HTML 中适当的位置，即在你想要链接的文本之前（显然），并且 style="color:#ffffff;" 元素正确嵌套在 <a> 标签内。

当然，在文本链接的背面不要忘记包含你的 </a> 标签。在 Gmail 中查看时，这对我很有效。

<a target="_blank" style="color:#ffffff;"  href="http://yoursite.com">Custom Color Link in Gmail</a>

- Ryan

---

这个回答并不是很有帮助。问题的示例并没有遇到你提到的任何问题。 - Gus