jquery - html元素宽度小于单个子元素宽度之和？

Question

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

html 父元素的宽度(使用 1$(el).width()1 计算)小于子元素的组合宽度。

1. 仅在 Firefox 中发生。

知道为什么会这样吗？

Answer 1

可能，总宽度是宽度的总和，并且这些分数宽度以前以某种方式四舍五入。此总和不等于容器的宽度。我发现更多的元素会产生更多的不准确性，例如5 个元素相差 3 个像素。

实际上，行内文本 block 可以有分数 宽度，例如 10.6px 。因此，将其中三个 block 排成一行将占用 31.8px ≈ 32px。但是当每个宽度四舍五入到总共 ≈ 11px * 3 = 33px 时。这是一个像素的差异。 http://jsfiddle.net/3BFGU/86/

n.b. Firefox 的字体渲染引擎仅在 font-size > 15px(至少 Verdana、Arial和 Segoe UI，它们应用了极端提示)。当更少时，每个字母都具有整数宽度值，并且字符串中所有相同的字母都具有完全相同的光栅图像。使用 letter-spacing: .9px; 并在 font-size: 14.9px; 和 font-size: 15.1px; 之间切换可以清楚地看到这种行为>

除此之外，一年前我做了 a little playground测试不同浏览器的渲染引擎。