Resolved Text positioning in all versions of Internet Explorer - a known bug?

[cerulean]

Internet Explorer seems to position text differently than Firefox, Chrome and Safari. Please see the following link and enlargement image:
http://www.cerulean.co.nz/demo/testing.html



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.

[abduraooft]

Remove those line-heights and check again.

[cerulean]

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.

[santhoshj400]

Hi,
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