When line height is applied using a <span>, any child <span> will cause the page-defaults.css to overwrite the line-height with a “0” value.

Below is the problematic code. I don’t know if I wrote it or not, but the new Text Editor does not correct it.

<span style="font-size: 13px; line-height: 20px;"> <span style="font-family: arial,sans-serif;">Text</span> </span>

Many modern browsers appear to ignore this scenario. But IE 6-7 do not ignore it and sets the line-height to 0 (tested using BrowserStack). I have also noticed it on some of my co-workers newer version of Internet Explorer as well.

The result is a very ugly broken page:

The fix is simple, the line-height needs to be the most inner <span>.

This issue does bring up a deeper concern. Unbounce should not be styling text using inline spans. Inline styles is a result of lazy WYSIWYG design. Why don’t we have a way to set page level header (<h1>,<h2>…) and paragraph (<p>) styles? You already have this setting available for default text colors.