When line height is applied using a
<span>, any child
<span> will cause the
page-defaults.css to overwrite the
line-height with a “
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
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 (
<h2>…) and paragraph (
<p>) styles? You already have this setting available for default text colors.