Is the width of an html element less than the sum of the width of the individual child elements?

Question

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

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

• It only happens in Firefox.

Any idea why this might happen?

Answer 1

The total width is probably the sum of the widths, and these fractional widths were previously rounded . This amount is not equal to the width of the container. I found that more elements lead to more inaccuracies, for example. 3 pixels for 5 elements.

In fact, the embedded text block can have a fractional width, for example 10.6px. Thus, three of these blocks placed in a row will occupy 31.8px ≈ 32px. But when each width is rounded to ≈ 11px * 3 = 33px. Here is one of the disadvantages of the pixel. http://jsfiddle.net/3BFGU/86/

nb Firefox's font rendering engine only starts using subpixel placement when font-size> 15px (at least for the Verdana, Arial, and Segoe user interfaces that have an extreme hint). When smaller, each letter has an integer value of the width, and all the same letters in the line have exactly the same bitmap. This is clearly seen with letter-spacing: .9px; and switching between font-size: 14.9px; and font-size: 15.1px;

In addition, a year ago I made a small playground for testing the rendering mechanisms of different browsers.

Answer 2

Looks like an error in Firefox ... maybe a rounding error?

Error not consistent. If you add a space in the second range, then after the “new” it will be counted correctly (I am testing 14.0.1).

http://jsfiddle.net/DigitalBiscuits/3BFGU/81/

Also, if you change the last "w" again to capital, it will calculate correctly. http://jsfiddle.net/DigitalBiscuits/3BFGU/83/

this would make me believe how firefox calculates the size of elements in pixels, and there should be some kind of rounding, up or down, associated with this discrepancy.

Edit ~

I just upgraded to 15.0 and get the same results. I will test on all versions until I fully comprehend and let you know the results.

Repeat the same on 15.0.1, latest version

Answer 3

The exact width gets rounding during calculation. Perhaps this can lead to the fact that ff will show such a result.