电子邮件中的 Gmail 蓝色链接

Question

我不知道如何更改 Gmail 添加到我正在尝试编码的电子邮件中的这些蓝色链接。

我已经在线搜索并实施了他们的修复，但无济于事。

这是我的代码。

<th class="small-12 large-6 last columns text-right show-for-large" valign="middle" style="Margin:0 auto;color:#fff;font-family:'Open Sans',sans-serif;font-size:16px;font-weight:400;line-height:1.3;margin:0 auto;padding:0;padding-bottom:16px;padding-left:8px;padding-right:16px;padding-top:16px;text-align:right;width:274px">
    <a href="https://website.com/wealth" style="Margin:0;color:#fff!important;font:inherit;font-family:'Open Sans',sans-serif;font-size:10px!important;font-weight:400;line-height:1.75;margin:0;padding:0;pointer-events:none;text-align:left;text-decoration:none!important">Wealth</a>&nbsp;&nbsp; 
    <a href="https://discover.website.io/" style="Margin:0;color:#fff!important;font:inherit;font-family:'Open Sans',sans-serif;font-size:10px!important;font-weight:400;line-height:1.75;margin:0;padding:0;pointer-events:none;text-align:left;text-decoration:none!important">News</a>&nbsp;&nbsp; 
    <a href="https://website.com/contact" style="Margin:0;color:#fff!important;font:inherit;font-family:'Open Sans',sans-serif;font-size:10px!important;font-weight:400;line-height:1.75;margin:0;padding:0;pointer-events:none;text-align:left;text-decoration:none!important">Contact Us</a>&nbsp;&nbsp;
</th>

Answer 1

我根据 Alon 在评论中的建议在链接周围添加了一个 <span> 标签以使其正常工作。

Answer 2

您需要更改 6 位数字值的颜色，我认为没有任何电子邮件客户端支持 3 位数字颜色。除了 color 和 text-decoration 之外，我还会删除 a 标签上的所有内联样式，同时删除 !important。字体样式将全部继承自 th.

我在所有模板中使用的总体 css 修复如下。您还需要将 id="body" 添加到 <body> 元素。

    u+#body a,
    #MessageViewBody a {
      color: inherit;
      text-decoration: none;
      font-size: inherit;
      font-family: inherit;
      font-weight: inherit;
      line-height: inherit;
    }

（#MessageViewBody a 也会从 Samsung Mail 中删除蓝色链接，但无需将该 ID 添加到您的代码中。一个方便的修复程序。）

Answer 3

因此，对于 gmail，为了选择超链接锚 () 的实际样式，您必须使用以下内联 css 来设置颜色并删除下划线： style="color: #FF0000; text-decoration:none; cursor:text; pointer-events: none;"

这是一个完整的标签的样子： <a href="http://www.google.com/" style="color: #FF0000; text-decoration:none; cursor:text; pointer-events: none;">Click here to go to Google</a>

截至回答日期有效：2019 年 9 月 19 日

电子邮件中的 Gmail 蓝色链接

Gmail blue links in email

css

html-email

zurb-ink