丢失的像素在CSS布局中的百分比在哪里？

Question

可能重复:
使用CSS均匀分布的子元素高度

可以说我的设计有6个DIV,左边是浮动的,宽度为16.666%.因此文档大小分为6个部分.

现在,如果我的文档大小为620px宽,这将使每个部分103.333px.因为我不知道可以显示部分像素的屏幕:)我想知道浏览器如何处理部分像素.

这是我的测试用例:http: //jsfiddle.net/dhQh2/(只需调整窗口大小即可获得结果)

当调整接缝大小时,6 DIV保持相同的大小.但有些情况下它不可能.浏览器如何处理这些部分PX值？

Answer 1

例如,如果你使用%宽度,并且确切的宽度应该是103.333px,那么浏览器必须决定如何显示.

不同浏览器做出不同的决定,阅读这些链接以获取更多信息

• http://ejohn.org/blog/sub-pixel-problems-in-css/
• http://elasticss.com/determination-of-algorithms-used-for-percentage-based-rounding-divs-on-browsers-and-css-frameworks/

我特别喜欢John Resig/David Baron的解释,为什么这甚至是一个问题:

我和一些Mozilla开发人员讨论过这个问题,David Baron很好地解释了这个情况:

我们试图满足一系列不能同时满足的约束(证据留给读者作为练习,尽管我可能已经在Bugzilla评论中写了一次):

1. 从容器的一个边缘开始的4个宽度/高度为25%的相邻物体(例如)应恰好在另一个边缘处结束; 容器中永远不应该有一个额外的像素,并且它们永远不应该被包裹,因为它是一个像素到宽

2. 逻辑上相邻的物体应始终在视觉上触摸; 由于舍入误差,不应该存在像素间隙或重叠像素

3. 给定相同宽度的对象应占用相同数量的像素

4. 对象边界应始终(在视觉上)别名到显示中的特定像素边界(它们永远不应模糊)

一个[Mozilla]牺牲通常是(3),除了我们牺牲(1)通过更早地将宽度四舍五入到像素边界的边界.

有关强制一致性的JavaScript修补程序,请参阅此问题:

使用CSS均匀分布子元素的高度

另一个相关问题:

CSS宽度中的小数位是否受到尊重？

Answer 2

他们进入像素的天堂;)

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

我想到的第一种方法是计算每个区域的宽度.然后将它四舍五入到最近的int.剩下的像素只是留空.

另一种方法可能是填充最后一个区域,无论宽度是多少(误差很小).

非常有趣的问题:用css控制这种行为可能会很好.