I was putting together some demo pages a while back and I noticed that the line-height (or “leading” as it’s called in the print world) was expanding slightly between certain pairs of lines. This caught my eye because the line-height was set explicitly to a px value in the CSS. The spacing between any two adjacent lines should have been totally uniform but yet some were wider apart than others by one pixel.
Here’s a snippet using underlined text to illustrate:
This was in IE8 on Windows XP. I checked FireFox, Safari, Chrome, Opera, all looked fine. Even IE8 on Vista was fine.
I narrowed it down, finally, to the presence of HTML spacer entities like   or  . For some reason, spacer entities like these, for which there are no corresponding characters in the font, cause an extra pixel of line-height to appear in IE8 on Windows XP.
After confirming the bug on three separate XP machines, I filed a formal bug report on the Microsoft Connect site:
1 Pixel Jog Caused By Insertion Of HTML Character Entities
And then, as an extra kick in the pants, I duplicated the same bug report on the IE newsgroup microsoft.public.internetexplorer.general. This newsgroup isn’t restricted to bug reports, but it is monitored by lookouts from Microsoft who will pass along anything that looks to them like a significant problem.
If you feel strongly that you’ve spotted a browser bug that’s reproducible on computers other than your own and will therefore adversely effect a lot of users, don’t feel bashful about making some noise. No one will blame you, and many might have you to thank.
I also supplied a test page that reproduces the problem. But remember, you won’t actually see the 1px jog in line-height unless you’re one of the lucky tens of millions of people using IE8 on XP!
The bug has since been confirmed. Web developers might have to learn to live with it because it’s going to be difficult to patch. Developers have a very limited choice of typographic tools to begin with and it’s a shame to have a problem like this crop up. Especially disappointing in IE because that means the installed base of users susceptible to the bug will be around for years and years. And this was a version that was in development for nearly a year.
I was a Beta tester for IE8. It’s upsetting to see this, really.
Using entities like   or   or   can be much more convenient than crafting an equivalent using CSS. But now it seems we have to either shy away from them or simply accept the side-effect. I still use XP on my main development machine and I do use spacer entities. It’s funny how, once you know something is there, you can’t help but notice it. Right now, since I know where the entities are, every time I check one of my posts in IE8, the extra line-height is the first thing that draws my attention.