从Outlook发送到gmail时，如何防止html链接下划线? [英] How to prevent html link underline in when sent from outlook to gmail?

问题描述

我尝试将包含锚标签的渲染html复制粘贴到Outlook，例如:

I try to copy-paste rendered html that includes anchor tag to outlook, for example:

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

(我通过右键选择呈现的html->全选)

(I select the rendered html with right click -> select all)

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

but when I send the mail to gmail I receive the links with underline. I tried to give this element text-decoration: none; style but it doesn't work.

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

Here is a code example: https://codepen.io/anon/pen/WdKrvj

在前景方面(发送方): 复制粘贴后的外观

On outlook (sending side): outlook after copy-paste

在gmail(接收方)上:在收到Gmail后

On gmail (receiving side): gmail after receiving

谢谢！

推荐答案

有时我发现内联text-decoration: none;是不够的.烦人吧?我已经将以下代码添加到像这样的防弹自动检测链接中.基本上将类添加到可能包含电子邮件客户端可能检测到的电话号码或邮寄地址的任何父元素(例如<td>或<div>).

Sometimes I've found inlining a text-decoration: none; isn't enough. Annoying, right? I've added the following code to bulletproof auto-detected links like this. Basically add a class to any parent element (like a <td> or <div>) that might contain a phone number or mailing address that an email client might detect.

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:[phone]" style="text-decoration: none; color: #4e4b4c;">1000000000</a>
</td>

虽然可以根据所测试的Gmail的风格而定，但结果可能有所不同.

I've seen this generally work, though depending on which flavor of Gmail you're testing, results might vary.

这篇关于从Outlook发送到gmail时，如何防止html链接下划线?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！