New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
hteumeuleu opened this Issue Dec 28, 2015 · 2 comments

Comments

Projects
None yet
2 participants
@hteumeuleu
Owner

hteumeuleu commented Dec 28, 2015

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.

@hteumeuleu hteumeuleu added the bug label Dec 28, 2015

@hteumeuleu hteumeuleu changed the title from Office 365 strips <a> tags with empty or invalid href attributes to Office 365 and Outlook.com strip <a> tags with empty or invalid href attributes Mar 15, 2016

@kate-stoner

This comment has been minimized.

Show comment
Hide comment
@kate-stoner

kate-stoner commented Mar 6, 2018

Thanks!

@hteumeuleu

This comment has been minimized.

Show comment
Hide comment
@hteumeuleu

hteumeuleu Mar 15, 2018

Owner

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>
Owner

hteumeuleu commented Mar 15, 2018

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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment