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

Posted 2023-05-09

【中文标题】html元素宽度小于单个子元素宽度的总和？

【英文标题】：html element width is less than the sum of width of individual child elements?

【发布时间】：2012-09-18 17:44:04

【问题描述】：

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

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

仅在 Firefox 中发生。

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

【问题讨论】：

什么版本的火狐？对我来说不会在 15 年内发生。

我使用的是 15.0.1。 FF 的 Nightly 版本（版本 17）也会发生

【参考方案1】：

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

实际上，inline text block 可以有fractional 宽度，例如 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; 之间切换时可以清楚地看到这种行为

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

【讨论】：

谢谢。如果你能详细说明内联文本块可以有小数宽度，那就太好了。

【参考方案2】：

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

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

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

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

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

~编辑~

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

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

【参考方案3】：

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