Browsers and fractional pixels
While fiddling about with the css for this page, I spotted a little browser inconsistency with rendering fractional pixels/sub-pixels. Why on earth would you ever use fractional pixels? Perhaps if you’re calculating dimensions using javascript, which could easily give fractional results.
I started thinking that Firefox is the odd one out here, unusually. And then I tried IE8, which is even odder, especially for borders. I tested IE6/IE7/IE8, Firefox3, Chrome, Opera 9/Opera 10, Safari 4/WinXP.
Fractional pixels on div widths
In this case Firefox and IE8 round the div width to the nearest whole pixel, all the other tested browsers use the integer value only.
Fractional pixels on centered div widths
Container div 601px wide
Container div 600px wide
In Firefox and IE8, where the div is centred, if the total available space on either side of the div for a rounded-up width is an even number of pixels, the width is rounded up (top demo above). Firefox adds the extra pixel on the left and IE8 on the right, compared to the integer dimension. Otherwise the width is rounded down (lower demo). All other browsers round down as before.
Fractional pixels on borders
When a fractional border-width is used, Firefox rounds any border width between 0 and 1px to 1px, but doesn’t round any other border-width up and uses the integer border-width. Where Firefox does add a border, the width of the div increases as expected. IE8 is very odd here. Like Firefox, any border-width below 1px results in a 1px border being displayed. But then things get strange. Here’s what IE8 does:
| Fractional amount | Effect on border width | Effect on overall div-width | Comments |
|---|---|---|---|
| .01px to .25px inclusive | No change | No change | This is what you’d expect intuitively |
| .26px to .5px inclusive | No change | Increased by 1px | Non-intuitive increase in overall width |
| .51px to .75px inclusive | Increased by 1px | Increased by 1px | Intuitive increase in border but non-intuitive absence of corresponding width increase |
| .76px or higher | Increased by 1px | Increased by 2px | We’re back to what you’d expect intuitively |
Ho hum, some very non-intuitive behaviour from IE8. In particular not rounding up borders of .5px seems strange to me. Looks like someone’s gone to a lot of effort to make it that complex.
Fractional margins
Again, Firefox rounds the fractional margin, all other browsers use the integer value.
Fractional padding
This div has left padding of 10.5px
This div has left padding of 10px
And finally, Firefox rounds fractional padding, all other browsers use the integer value only.
Conclusion
Although Firefox doesn’t quite do what all the other browsers do, what is does is consistent and predictable. Equally, all the other browsers except IE8 are consistent and predictable – they ignore any fractional pixels. IE8’s isn’t predictable or consistent – it attempts to do something with fractional widths and borders, but ignores fractional margins and padding, and does very unexpected things with borders.
Please add comments, additional information or suggestions for further examples.
Hi Daniel
I see what you’re saying about IE8, and mathematically alone, I suppose it makes sense. But, from a css perspective, the total width of a div 400px wide (with no padding) should be 400px plus the width of its borders, surely? If both borders are set to be 1.4 px wide, the borders will still each be 1px wide – so you’d expect the total width of the div to be 402px, but in IE8 the total width would be 403px. That’s what I find unintuitive.
Hi! I tested your page (http://www.simonbattersby.com/blog/browsers-and-fractional-pixels/) in Opera 10.62, Firefox 3.6.10 and Internet Explorer 7. The only difference I could see in Firefox was the centred div (600px) with the rounded-up value.
What IE8 is doing makes sense (within itself). You need to add a border to _both_ sides! Double all your values and it is back to being intuitive. I’m guessing they used minimal code to get it to do that.
Cheers,
Daniel