Unitless line-height bug in Mozilla and Firefox

When Eric Meyer posted Unitless line-heights (you do not need to use a unit when specifying line-height in CSS) earlier this year, I knew that at some point I had run into problems with that. After reading the article I did a bit of testing, but was unable to reproduce the problem. I thought maybe I had just imagined things. After all it was a while since I had last run into any line-height problems.

Like Eric emphasises in the article, unitless line-height is what you want in most cases, so I went through the CSS for 456 Berea Street to fix that. After checking in a whole bunch of the latest browsers I didn’t notice any problems, so I thought all was fine. But it wasn’t.

I didn’t notice the problem until a couple of weeks ago. A couple of readers sent me reports about rendering issues (not related to line-height) in Firefox 1.0.7, so I downloaded that version to have a look. When I viewed this site in Firefox 1.0.7 on my Mac I immediately noticed that the line heights were way too large.

I went back to Firefox 1.5 and the problem was gone. All line heights were the same as in other browsers. I launched Mozilla, and it had the same problem as Firefox 1.0.7. SeaMonkey, however, gets it right.

A Bugzilla search for line-height problems didn’t make me any wiser, but the fact that more recent versions of Gecko behave correctly makes me think that someone noticed the problem and fixed it. It’s hard to tell without seeing a bug report though. What if it was fixed by accident and shows up again in even newer builds?

Determined to know exactly which versions of Gecko-based browsers have the line-height bug I downloaded a set of releases and started testing.

My conclusion is that the bug exists in Firefox versions up to and including 1.0.8 and all versions of Mozilla (but not SeaMonkey), and as far as I can tell it only exists in Mac OS X builds. The bug appears when you assign line-height without specifying a unit and set the font-family to anything but “Times”. Under those circumstances Gecko miscalculates line-height, making it larger than it should be. I made a quick Demo of the unitless line-height bug in Gecko to let you see it in action.

Sure, this isn’t a huge problem, especially considering that it seems to affect only a small minority of users. I still hope I can save someone a bit of grief by posting about it. I have not been able to find a workaround, so if you happen to know of one or have any other information about this bug, please post a comment.

Posted on August 29, 2006 in Browsers, CSS