IE8 Bug – HTML Spacer Entities Create One Pixel Jog In Line-Height

Jun 23, 2009

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 ex­pand­ing slight­ly be­tween certain pairs of lines. This caught my eye because the line-​height was set explicitly to a px value in the CSS. The spac­ing between any two ad­ja­cent lines should have been totally uni­form but yet some were wid­er apart than oth­ers by one pixel.

Here’s a snippet using underlined text to illustrate:

IE8 Line-Height Bug Graphic

This was in IE8 on Windows XP. I checked FireFox, Safari, Chrome, Op­era, 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 pix­el of line-height to appear in IE8 on Windows XP.

After confirming the bug on three separate XP machines, I filed a for­mal 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 re­port on the IE newsgroup microsoft.​public.​internetexplorer.​gen­eral. This news­group isn’t restricted to bug reports, but it is mon­itored by look­outs from Microsoft who will pass along anything that looks to them like a sig­nificant problem.

If you feel strongly that you’ve spotted a browser bug that’s repro­duc­ible on computers other than your own and will therefore adversely ef­fect 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 re­mem­ber, 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. De­vel­op­ers have a very lim­it­ed choice of typographic tools to begin with and it’s a shame to have a prob­lem like this crop up. Especially dis­ap­point­ing in IE because that means the in­stalled base of users sus­cep­tible to the bug will be a­round for years and years. And this was a ver­sion 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 con­ven­ient than crafting an equivalent using CSS. But now it seems we have to ei­ther shy away from them or simply accept the side-effect. I still use XP on my main development machine and I do use spacer en­tities. 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, ev­ery time I check one of my posts in IE8, the extra line-height is the first thing that draws my attention.

Sharing Options:

Leave a Comment

Previous post:

Next post: