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

Question

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

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

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

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.

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

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

On gmail (receiving side): gmail after receiving

Thanks!

Answer 1

The links are placed because Gmail places a list style around your link example:

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

A way around this is add a span around your phone number (or address)

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

Then using CSS you can target that specific element and set it's style

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

Full article (with second option) can be found here.

Hope that answers your question.

Answer 2

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

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