电子邮件中的Gmail蓝色链接

时间:2018-06-05 17:01:38

标签: css html-email zurb-ink

我无法弄清楚如何更改Gmail正在添加到我尝试编码的电子邮件中的这些蓝色链接。

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

See here

这是我的代码。



<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>
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:2)

我在链接中添加了<span>标记,以便在评论中根据Alon的建议使其正常工作。

答案 1 :(得分:0)

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

我在所有模板中使用的整体css修复如下。您还需要添加一个id =&#34; body&#34;到你的<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也会从三星邮件中删除蓝色链接,不需要在您的代码中添加该ID。这是一个方便的修复方法。)

答案 2 :(得分:0)

因此,对于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日