从outlook发送到gmail时如何防止html链接下划线？

Question

我尝试将包含锚标记的渲染html复制粘贴到outlook，例如：

<a href="tel:1000000000" style="text-decoration: none; color: #4e4b4c;">1000000000</a>

（我选择右键单击渲染的html - >全选）

但当我发送邮件到Gmail时，我会收到带下划线的链接。 我试图给这个元素text-decoration: none; 风格，但它不起作用。

这是一个代码示例： https ： //codepen.io/anon/pen/WdKrvj

在outlook（发送方）： 复制粘贴后的前景

在gmail（接收方）： 收到后的Gmail

谢谢！

Answer 1

放置链接是因为Gmail会在链接示例周围放置一个列表样式：

.ii a[href] { color: #15c; }

解决此问题的方法是在您的电话号码（或地址）周围添加一个范围

<span class="contact">675 Massachusetts Ave.<br>Cambridge, MA 02139, USA</span>

然后使用CSS，您可以定位该特定元素并设置它的样式

.contact a {color:#000000!important; text-decoration:underline!important;}

完整的文章（有第二个选项）可以在这里找到。

希望这能回答你的问题。

Answer 2

有时我发现内联text-decoration: none; 还不够。 讨厌，对吧？ 我已经添加了以下代码来防止像这样的自动检测链接。 基本上将类添加到任何父元素（如<td>或<div> ），其中可能包含电子邮件客户端可能检测到的电话号码或邮寄地址。

CSS：

<style>
    *[x-apple-data-detectors],  /* iOS */
    .x-gmail-data-detectors,    /* Gmail */
    .x-gmail-data-detectors *,
    .aBn {
        border-bottom: 0 !important;
        cursor: default !important;
        color: inherit !important;
        text-decoration: none !important;
        font-size: inherit !important;
        font-family: inherit !important;
        font-weight: inherit !important;
        line-height: inherit !important;
    }
</style>

HTML：

<td class="x-gmail-data-detectors">
    <a href="tel:1000000000" style="text-decoration: none; color: #4e4b4c;">1000000000</a>
</td>

我已经看到这通常有用，但根据您正在测试的Gmail的风格，结果可能会有所不同。