2011-04-07 19 views
20

可能重复:
Evenly distributed height of child elements with CSS丢失的像素在CSS布局中的位置在哪里?

可以说我有与6倍的DIV是浮动剩下的16.666%的宽度的设计。 所以文档大小分为6部分。

现在,如果我有一个文件大小可以说620px宽,这将使每个部分103.333px。由于我不知道可以显示部分像素的屏幕:)我不知道浏览器如何处理部分像素。

这里是我的测试用例: http://jsfiddle.net/dhQh2/(只是调整窗口的大小,以得到一个结果)

当调整其大小接缝,该6倍的DIV保持相同的尺寸。但它有些情况是不可能的。浏览器如何处理这些部分PX值?

+0

我想看到这个问题的答案:) – Pieter888 2011-04-07 13:39:22

+0

+1。并且对于奖励积分,您如何考虑1px边框所使用的像素(盒子模型外部,因此这些像素会被添加到整个盒子大小) – Spudley 2011-04-07 13:41:04

+3

与此相同:http:// stackoverflow。 com/questions/5115637/balanced-distributed-height-of-child-elements-with-css这个问题以前已经问过很多次了。不同的浏览器以不同的方式处理舍入。我所链接的这个问题在评论中有相关的链接。 – thirtydot 2011-04-07 13:41:05

回答

10

如果,例如,您使用的是%宽度,以及确切的宽度应为103.333px,然后在浏览器必须如何显示上的决定。

不同的浏览器做出不同的决定,阅读这些链接,了解更多信息:

我特别喜欢从为什么这甚至是约翰Resig的/戴维·巴伦对此的解释一个问题:

我是t烯王这个在一些 Mozilla的开发和大卫·拜伦 说明了情况相当不错:

我们正在努力,以满足一堆 约束不可能都满足 在同一时间(证明 留给读者作为练习给读者, 虽然我可能在一个Bugzilla评论已经实际写入它 出一次):宽/

  1. 4个相邻的对象的高度的25%(例如)从1开始EDG一个容器的一个 应该完全在 另一个边缘;有不应该 容器中的额外的像素和 它们不应该被包裹由于 述对在逻辑上是相邻总是应该视觉触摸宽

  2. 对象的像素;有 绝不应该是像素间隙或重叠的由于给予相同的宽度应占据相同数量的像素的

  3. 对象边界应该总是(目视)被混叠到舍入误差

  4. 对象的像素 在所述显示器(它们 绝不应模糊)

该一个[Mozilla的]牺牲特定 像素边界是 通常(3),除了边框 我们牺牲(1)四舍五入 宽度像素边界很多 较早。

看到这个问题的一个JavaScript修复力的一致性:

Evenly distributed height of child elements with CSS

另一个相关的问题:

Are the decimal places in a CSS width respected?

2
+0

这确实部分回应了我的问题。使用全宽时会发生什么?浏览器需要做一些div来填满整个空间......但是我无法弄清楚你发布的链接会发生什么。我错过了什么? – meo 2011-04-07 13:59:56

6

他们去像素的天堂;)

只是开玩笑。很有可能不同的浏览器以不同的方式处理它。

我想到的第一种方法是计算每个区域的宽度。然后将其四舍五入到最接近的整数。剩下的像素只剩下空白。

另一种方法,可以是填充的最后区域,不管它是在宽度(与误差的小幅度)。

非常有趣的问题:它确实可以很好地控制这种行为。

+5

这实际上确实有道理。关于Pixelheaven的部分我的意思是。 – Pieter888 2011-04-07 13:54:14

1

火狐4:

围绕这6周的div的div有边框。当您缓慢调整整个窗口的大小时,会看到边框“跳跃”。这意味着所有的div都有相同的宽度,但总和小于/大于100%。 当您仅调整包含div的像素时,您会发现并非所有div都会同时更改宽度。

1

根据您使用的浏览器更改会发生什么情况。某些浏览器可能会将值舍入。有些人强迫它收集起来(在某些语言中为math.ceil),有些则舍入或“截断”。例如,Google Chrome浏览器会截断小数点。

您可以轻松地测试此通过打印筛选的影响,然后再检查油漆编辑器的大小(油漆,paint.net,Adobe公司的Photoshop等)

很有趣的问题,但是:)