Need some help?

I'm usually available for small jobs or problem solving with jQuery or css, at reasonable rates. Just get in touch.

Web Hosting

We recommend Clook for web hosting. UK based, great service and great value.

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

This div has width of 400.6px
This div has width of 400px
This div has width of 400.4px

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

This div has width of 400.6px
This div has width of 400px

Container div 600px wide

This div has width of 400.6px
This div has width of 400px

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

This div has border width 0.25px
400px
This div has border width 0.26px
401px
This div has border width 0.75px
402px
This div has border width 1.25px
This div has border width 1.26px
This div has border width 1.5px
This div has border width 1.51px
This div has border width 1.75px
403px
This div has border width 1.76px
404px
This div has border width 2px

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:

IE8 behaviour with fractional pixel borders
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

This div has a left margin of 10.5px
This div has a left margin of 10px

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.

2 responses to “Browsers and fractional pixels”

  1. Daniel says:

    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

  2. Simon says:

    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.

Useful? Interesting? Leave me a comment

I've yet to find a way of allowing code snippets to be pasted into Wordpress comments - so if you're trying to do this you'd be better off using the contact form.