For me (OS X 10.14), your example code has the same appearance in Chrome and Firefox, and shows whitespace between the lines.
That being said, this is all a problem of CSS. The fundamental issue is that the font-size and the line-height are different on purpose, in order to give a bit of space between the lines. The standard practice (which we follow) is that line-height is roughly ~1.2 times the font-size.
I don't think there's a perfect solution, but the issue can probably be reasonably fixed. All of the relevant CSS is in the rendermime package: