Question

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

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

（我选择右键单击渲染的html - ＆gt;全选）

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

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

关于展望（发送方）： outlook after copy-paste

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

谢谢！

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;}

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

希望能回答你的问题。

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风格，结果可能会有所不同。

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

2 个答案: