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

【问题标题】：How to prevent html link underline in when sent from outlook to gmail?从outlook发送到gmail时如何防止html链接下划线？
【发布时间】：2018-06-23 07:24:33
【问题描述】：

我尝试将包含锚标记的渲染 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 after copy-paste

在 gmail 上（接收方）：gmail after receiving

谢谢！

【问题讨论】：

标签： html hyperlink outlook gmail html-email

【解决方案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;}

完整文章（有第二个选项）可以找到here.

希望能回答你的问题。

【讨论】：

OP 是从 MS Outlook 发送的，所以那些添加的类被删除了。覆盖.ii a[href] { text-decoration:none; } 会影响整个电子邮件。为了只设置所需链接的样式，我尝试设置这些样式，但到目前为止没有运气：.ii a[href] span { text-decoration:none; }、.ii td a[href] { text-decoration:none; }。将display: inline-block 设置为span 元素以不继承父text-decoration 样式也不起作用，因为MS Outlook 在处理电子邮件时也会删除inline-block。
帖子似乎已被编辑。如果我知道这是通过 Outlook 发送的，我会简单地说不要这样做。

【解决方案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 的风格，结果可能会有所不同。

【讨论】：

恐怕这不起作用，因为 MS Outlook 去掉了 text-decoration 内联样式，所以 Gmail 接收到 <a> 元素未设置样式并应用自己的样式：.ii a[href] {text-decoration: underline}。