Browsers, Pixels and Rounding Errors

I guess most of us have understood for a long time that browsers rarely see eye to eye when it comes to calculating percentages, whether that be in element widths, element positioning or background placements. In fact, the background percentages post I did last year demonstrated it pretty clearly.

Thanks to JQuery guru John Resig, we now have a clinical breakdown of exactly how much differently the browsers view this issue.

Read the full article for the detail, but the short version goes something like this..

If presented with a sub-pixel percentage:

  • IE6 and IE7 round the number up
  • Opera and Safari round the number down
  • Firefox employs a sort of clever but slightly weird methodology that rounds some percentages up and others down.

Is it any wonder it’s such a trial trying to get liquid columns borders to align properly? I’m not sure if knowing exactly why things are difficult makes it easier to take or harder.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • dusoft

    Always leave at least 1% of width free to be conquered by rounding and calculations… I think that’s very old tip that’s still valid nowadays.