Question

http://jsfiddle.net/3BFGU/71/

Width of the html parent element (calculated using 1$(el).width()1) is less than the combined width of child elements.

1. Happens only in Firefox.

Any idea why this could be happening ?

Answer 1

Probably, total width is a sum of widths and these fractional widths were previously rounded in some way. This sum is not equal to width of container. I found that more elements produce more inaccuracy e.g. 3 pixels difference for 5 elements.

Actualy, inline text block can have fractional width, for example 10.6px . So, three of those blocks placed in a row will take 31.8px ≈ 32px. But when each width rounded to ≈ 11px * 3 = 33px in total. Here is the one pixel defference. http://jsfiddle.net/3BFGU/86/

n.b. Firefox’ font rendering engine start to use subpixel letter placement only when font-size > 15px (for at least Verdana, Arial and Segoe UI, which have extreme hinting applied). When less every letter have integer width value and all same letters in the string have exactly same raster image. This behaivior clearly seen with letter-spacing: .9px; and switching between font-size: 14.9px; and font-size: 15.1px;

Besides that, a year ago I made a little playground to test rendering engines of different browsers.