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

Question

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

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

1. 仅在 Firefox 中发生。

知道为什么会发生这种情况吗？

Answer 1

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

实际上，内联文本块可以有小数宽度，例如 10.6px 。因此，连续放置的三个块将占用 31.8px ≈ 32px。但是当每个宽度四舍五入到 ≈ 11px * 3 = 33px 时。这是一个像素的差异。http://jsfiddle.net/3BFGU/86/

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

除此之外，一年前我做了一个小操场来测试不同浏览器的渲染引擎。

Answer 2

看起来像 Firefox 中的错误....可能是舍入错误？

错误不一致。如果您在第二个跨度内添加一个空格，则在“新”之后它会正确计算（我正在 14.0.1 上进行测试）。

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

此外，如果您再次将最后一个“w”更改为大写字母，它会正确计算。 http://jsfiddle.net/DigitalBiscuits/3BFGU/83/

这会让我相信这取决于 Firefox 以像素为单位计算元素大小的方式，并且必须有一些四舍五入，向上或向下，这会导致这种差异。

~编辑~

我刚刚更新到 15.0 并且得到了相同的结果。我会测试所有版本，直到我完全更新并让你知道结果。

在 15.0.1 上再次相同，最新版本

Answer 3

在计算时，确切的宽度正在汇总。这可能会导致 ff 显示这样的结果。