在百分比CSS布局中，丢失的像素到哪里去？
可能重复：
Evenly distributed height of child elements with CSS
假设我有一个6个DIVs的设计，它的宽度为16.666%。因此，文档大小被分成6个部分。
现在，如果我有一个文档大小为620 if宽，这将使每个部分103.333px。因为我不知道可以显示部分像素的屏幕:)，我想知道浏览器是如何处理部分像素的。
下面是我的测试案例：http://jsfiddle.net/dhQh2/ (只需调整窗口大小以获得结果)
当调整大小时，6个DIVs会保持相同的大小。但有些情况是不可能的。浏览器如何处理这些部分PX值？
回答 5
Stack Overflow用户
发布于 2011-04-07 21:23:17
例如，如果您使用的是%宽度，并且确切的宽度应该是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很好地解释了这种情况：
我们正在尝试满足一系列约束，这些约束不能同时满足(这个证据留给读者作为练习，尽管我可能已经在Bugzilla的评论中写了一次)：
- 4宽度/高度为25% (例如)的相邻对象从容器的一条边缘开始，应该准确地结束在另一条边缘；容器中永远不应该有额外的像素，而且它们永远不应该被包装，因为它们是宽
- 对象的像素，而这些对象在逻辑上是相邻的，应该始终在视觉上触摸；不应存在像素间隔或由于舍入error
- objects而产生的像素重叠，如果相同的宽度应占用相同数量的pixels
- object边界，则应始终(在视觉上)别名为显示中的特定像素边界(不应模糊)
。
Mozilla牺牲的通常是(3)，除了我们牺牲(1)的边框外，我们更早地将宽度舍入像素边界。
有关强制一致性的JavaScript修复，请参阅此问题：
Evenly distributed height of child elements with CSS
另一个相关问题：
Stack Overflow用户
发布于 2011-04-07 13:43:09
它们在象素的天堂里;)
开玩笑而已。很可能不同的浏览器以不同的方式处理它。
我想到的第一种方法是计算每个区域的宽度。然后把它四舍五入到最近的整数。其余的像素都是空的。
另一种方法，可能是填充最后一个区域，无论它的宽度(有一个小范围的错误)。
非常有趣的问题:用css来控制这种行为可能是件好事。
Stack Overflow用户
发布于 2011-04-07 13:41:01
https://stackoverflow.com/questions/5581973
复制相似问题
腾讯云开发者
