Line-height differences between DOCTYPE modes

In notebook:
Work Notes
Created at:
2016-06-30
Updated:
2016-09-27
Tags:
email
Recently I had to switch back to XHTML transitional for an emailing project. I discovered that this changed the line-heights in some places.

The root of the problem is the "almost standards" rendering mode and is explained here:
https://msdn.microsoft.com/en-us/library/ff405794

The article gives a few ideas of which CSS properties can be targeted to toggle back the stricts-mode (HTML5 style) line-height calculations:

Inline elements contribute to line height if and only if one of the following is true. If the element: Contains text characters Has a nonzero border width Has a nonzero margin Has a nonzero padding Has a background image Has vertical-align set to a value other than baseline Note that a line break is not considered a text character for this definition unless it is the only content of a line box. In that case, the line box height remains the uppermost inline box top and the lowermost inline box bottom on the line, regardless of the specified line height. If an img element is the sole content of a table cell, the line box height of the cell line box height is adjusted to zero.

I'm also seeing that ​border-left​ sets different (smaller) line-height that ​border-right