html元素宽度是否小于各个子元素的宽度之和?

时间:2012-09-27 01:43:17

标签: jquery html css dom width

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

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

  1. 仅在Firefox中发生。
  2. 知道为什么会这样吗?

3 个答案:

答案 0 :(得分:4)

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

Actualy,内嵌文本块可以具有小数宽度,例如10.6px。因此,连续放置的三个块将占用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来测试不同浏览器的渲染引擎。

答案 1 :(得分:2)

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

错误不一致。如果你在第二个范围内添加一个空格,在'new'之后它会正确计算(我在14.0.1上测试)。

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

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

这会让我相信这与firefox计算元素大小的方式有关,并且必须有一些舍入,上升或下降,这会导致这种差异。

〜编辑〜

我刚刚更新到15.0并得到了相同的结果。我将对所有版本进行测试,直到我完全更新并告知您结果。

同样在15.0.1,最新版本

答案 2 :(得分:0)

准确的宽度在计算时得到了综合。这可能会导致ff显示出这样的结果。