View Full Version : Resolved Text positioning in all versions of Internet Explorer - a known bug?

10-27-2010, 10:28 AM
Internet Explorer seems to position text differently than Firefox, Chrome and Safari. Please see the following link and enlargement image:


In these examples the text element has been given a background colour, and you can see that IE positions the text 1 pixel higher than the other browsers I tested. This is a problem when text needs to be vertically centred in a tightly spaced box as it looks noticeably off-centre in IE. This screen capture was done on a machine running Windows XP SP3 with ClearType on. I tried other fonts with the same results.

Is this positioning difference a known bug in IE? I've tried searching for information but I can't find any discussion on the issue. Is it possible to correct the IE behaviour using CSS, preferably without having to create a separate stylesheet for IE alone?

Any advice is appreciated, thanks.

10-27-2010, 10:42 AM
Remove those line-heights and check again.

10-27-2010, 11:32 PM
Thanks for your reply, abduraooft.

You're right that the positioning difference is caused by the line-height value.

I've done some more testing and I've found that to make Internet Explorer position the text the same as the other major browsers the line-height needs to be set to:

'normal' - the same as removing the line-height rule as you suggested, but often the line-height would be inherited so it would need overriding. In theory 'normal' can be interpreted differently by different browsers, but the browsers I tested all set the line-height to the same number of pixels
an odd number of pixels if the font-size is an even number of pixels
an even number of pixels if the font-size is an odd number of pixels

It's annoying that Internet Explorer is the odd one out when it comes to other methods of specifying line-height, but at least there is a workaround.

Thanks again for your help.

10-30-2010, 11:32 AM
IE always takes one pixel as square where as other browsers takes one pixel as dot
so adjust according to this you will find a result