Office 365 and Outlook.com strip <a> tags with empty or invalid href attributes

[hteumeuleu]

When Office 365 and the new Outlook.com encounter an empty href, it will remove the <a> tag but leave its content. For example…

<a href="">Hello world</a>

… would become :

Hello world

When you have any content other than a URL inside a href, Office 365 and the new Outlook.com will show this content inside the email between brackets. So the following example…

<a href="Hello">world</a>

… would become :

[Hello]world

This bug was discussed on Litmus Forums here.

[kate-stoner]

Thanks!

[hteumeuleu]

This bug gets even weirder when combining styles. It turns out the styles applied to a problematic <a> tag will be applied on the first element after in the code that has a style attribute.

Huge thanks to @bago at Mosaico for writing about this. Here's an example from their post:

<a style="color: red; background-color: yellow;"></a>
<p>A paragraph</p>
<p>Second paragraph with no style</p>
<p style="">Third paragraph with style</p>
<p style="">Fourth paragraph with style</p>

On Outlook.com, this becomes:

<p>A paragraph</p>
<p>Second paragraph with no style</p>
<p style="color: red; background-color: yellow;">Third paragraph with style</p>
<p style="">Fourth paragraph with style</p>

It looks like any style in an invalid <a> tag will be pushed to some sort of styles array. And then, on the first all those styles will be flushed on the first element with a style attribute. So the following example:

<a style="color: cyan; background-color: cyan;">cyan</a>
<a style="color: purple; background-color: purple;">purple</a>
<a style="color: black; background-color: black;">black</a>

<p style="">Empty style 1</p>
<p style="">Empty style 2</p>
<p style="">Empty style 3</p>

…becomes:

<p style="color: cyan; background-color: cyan; color: purple; background-color: purple; color: black; background-color: black;">Empty style 1</p>
<p style="">Empty style 2</p>
<p style="">Empty style 3</p>

[tsturtz]

Thank you @hteumeuleu - it was so hard to find information on this. It was doing this with my http:// href value (localhost) ... 😕 (I assume because https is standard now)

[jkupczak]

I'm not seeing the style bug anymore on Outlook.com. I tested the following code:

<a style="color: red; background-color: yellow;"></a>
<p>A paragraph</p>
<p>Second paragraph with no style</p>
<p style="">Third paragraph with style</p>
<p style="">Fourth paragraph with style</p>

Outlook is still stripping the tag though.

[hteumeuleu]

Sounds about right! I see the same thing. Thanks for the notification. I'm closing this for now.

[hteumeuleu]

Wait… I closed this bug because the styles sub-bug noted here was fixed. But the main problem listed on the first post is still live and well. So this bug should still be open.

[lidialodovici]

How to fix this when href is dynamic? the anchor is defined by a handlebar variable

[revelt]

@lidialodovici do you mean "dev" (pre-production) template builds? If so, if you don't have the means to get templates rendered on ESP-side, there are two options: either render the template locally somehow (I go that approach myself, render Nunjucks templates locally, using mock data files, in Gulp) or find and replace all href before sending it out to test:

const regx = /href="{{[^}]+}}/g;
const inp = `{{dont replace me}} <a href="{{foo}}">click</a>`;
console.log(inp.replace(regx, `href="http://test.com`));
// => {{dont replace me}} <a href="http://test.com">click</a>