email-bugs icon indicating copy to clipboard operation
email-bugs copied to clipboard

Outlook mac forcing mailto link to show as blue

Open M-J-Robbins opened this issue 2 years ago • 1 comments

Outlook on Mac is forcing :mailto link to have blue text by adding the inline style color: rgb(0, 120, 212) !important;

This is happening only in the "New Outlook" which is turned on at the top right corner of the app. new outlook toggle button I'm using Outlook V16.56 on iOS 11.6.2

This is enough code to reproduce the issue

    <a href="https://example.com" style="color:green;">web link</a>
    <a href="mailto:[email protected]" style="color:green;">mailto link</a>

which Outlook renders as

<a href="https://example.com" contenteditable="false" title="https://example.com/" style="font-family: Calibri; font-size: 14px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: green;">web link</a><span style="caret-color: rgb(0, 0, 0); color: rgb(0, 0, 0); font-family: Calibri; font-size: 14px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; display: inline !important; float: none;"><span class="Apple-converted-space"> </span></span><a href="mailto:[email protected]" contenteditable="false" title="mailto:[email protected]" style="font-family: Calibri; font-size: 14px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: rgb(0, 120, 212) !important;">mailto link</a>

M-J-Robbins avatar Jan 06 '22 15:01 M-J-Robbins

This was initially reported in EmailGeeks Slack by Brandon Bento who also pointed out this work around

from a quick test, a solution can be wrapping it with a span:

<a href="mailto:[email protected]" style="color:green;">
<span style="color:green;">mailto link</span>
</a>```

M-J-Robbins avatar Jan 06 '22 15:01 M-J-Robbins