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