Difference of text positioning between Internet Explorer and other browsers

HTML & CSS
1

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 PC running Windows XP SP3 with ClearType on. I tried other fonts with the same results.

Is this positioning difference a known bug in IE? 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.

2

Hi, Welcome to sitepoint :slight_smile:

Browsers aren’t required to make fonts exactly the same as other browsers and so there will inevitably be differences from the start. Then there are rounding errors to take into account so it will be rare to get all things absolutely pixel perfect cross browsers I’m afraid.

  1. ‘font-size’ must be matched within a UA-dependent margin of tolerance. (Typically, sizes for scalable fonts are rounded to the nearest whole pixel, while the tolerance for bitmapped fonts could be as large as 20%.) Further computations, e.g., by ‘em’ values in other properties, are based on the computed value of ‘font-size’.

Using a line-height of 100% isn’t really enough to display the font-properly and ascenders and descenders will poke out and is probably the reason for the baseline being perceived differently. If you increase the line-height by 1px then as far as I can see Firefox and IE then look the same.


.one {font-size:12px; [B]line-height:13px;[/B] background-color:#0CF;}
.two {font-size:24px;[B] line-height:25px;[/B] background-color:#0CF;}
.three {font-size:50px; line-height:50px; background-color:#0CF;}

You will just need to use trial and error where precision is required and use the best fit. IE doesn’t round dimensions very well and will often be 1 pixel out and sometimes changing something by a 1 pixel will eliminate the rounding error.

3

Hi Paul,

Thanks for your reply. 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’ - in theory this could 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.