(Sorry for my poor English)
Yesterday, I encountered a problem when using @font-face with a really large font-size (200px): one of my div rendered differently in Firefox and Chrome. After doing some research, I learned that it was due to Firefox and Chrome calculated line-height differently, and a specified line-height could solve my problem.
BUT, to my suprise, even if I did nothing, when I start FF in safemode, the problem solves itself! (it renders similar to Chrome) So I wonder that’s because I’ve customized FF too much? I creat a new profile (no addon, disable all plugin, reset all settings to default) but the newly created profile works the same like my old profile, and different with FF in safemode. I don’t understand it?
Safe mode, in addition to turning off all add-ons, also turns off the JIT and hardware accelerated rendering.
And if you’re on Windows (which I assume is the case given the described behavior), then turning off hardware-accelerated rendering also turns off DirectWrite rendering of text and uses GDI instead.
But DirectWrite and GDI end up with different font metrics for the same text: for one thing DirectWrite can do subpixel glyph positioning, and GDI cannot. So if you turn on safe mode, line heights and various other aspects of text layout can change.
Note that Chrome uses GDI to start with. IE 9 and 10 on the other hand, use DirectWrite, so it’s worth testing how your page behaves in those; I’ll bet it’s similar to Firefox not in safe mode.