在哪里丢失的像素的百分比CSS布局走？ [英] Where do the lost pixels go in a percent CSS layout?
问题描述
可能重复：结果
<一href=\"http://stackoverflow.com/questions/5115637/evenly-distributed-height-of-child-elements-with-css\">Evenly子元素分布高度与CSS
可以说我有6个的DIV是浮动剩下的16.666％的宽度的设计。
这样的文档尺寸是在6份splited。
Lets say i have a design with 6 DIVs that are float left with a width of 16.666%. So the document size is splited in 6 parts.
现在，如果我有一个文件大小可以说620px宽这将使每个部分103.333px。因为我不知道屏幕，可以显示部分像素:)我不知道浏览器是如何处理的部分像素。
Now if i have a document size of lets say 620px wide this would make each part 103.333px. Since i don't know screens that can show partial pixels :) I wonder how the browser handles the partial pixels.
下面是我的测试用例：
http://jsfiddle.net/dhQh2/ （只是调整窗口得到的结果）
Here is my testcase: http://jsfiddle.net/dhQh2/ (Just resize the window to get a result)
当调整其大小接缝，该6的DIV保持相同的尺寸。但某些情况下，是不可能的。如何浏览器处理这些部分PX价值？
When resizing it seams that the 6 DIVs keep the same size. But it some cases it can't be. How does the browser handle those partial PX values?
推荐答案
如果，例如，您使用的是％宽度和精确宽度应 103.333px ，那么浏览器必须如何显示上的决定。
If, for example, you're using a % width, and the exact width should be 103.333px, then the browser must make a decision on how display that.
不同的浏览器做出不同的决定，请阅读以下链接了解更多信息：
Different browsers make different decisions, read these links for more information:
- 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/
我特别喜欢从为什么这是一个连约翰问题Resig的/大卫男爵这样的解释：
I particularly like this explanation from John Resig/David Baron of why this is even a problem:
我用了一些这种交谈
Mozilla的开发和大卫·拜伦
说明了情况相当不错：
I was talking this over with some Mozilla developers and David Baron explained the situation quite well:
我们正在努力，以满足一堆
约束不可能都成为
满意在同一时间（证明
留给作为练习读者，
虽然我可能实际上它写
在一个Bugzilla注释掉一次）：
We’re trying to meet a bunch of constraints that can’t all be satisfied at the same time (the proof is left as an exercise to the reader, though I may have actually written it out once in a Bugzilla comment):
-
/宽度的4个相邻的物体高度的25％（例如）起始于一个边缘
容器应该结束恰好在
另一边缘;永远不应该有
在容器中的额外的像素和
他们不应该由于被包装
作为一个像素宽
4 adjacent objects of width/height 25% (for example) starting at one edge of a container should end exactly at the other edge; there should never be an extra pixel in the container and they should never be wrapped due to being a pixel to wide
这在逻辑上是相邻总是应该视觉触摸物体;那里
不应该是一个像素间隙或像素
重叠由于舍入误差
objects that are logically adjacent should always touch visually; there should never be a pixel gap or a pixel of overlap due to rounding error
赋予相同的宽度应占用相同数量的像素的对象
objects given the same width should occupy the same number of pixels
对象边界应始终（视觉）的别名指向一个特定的
在显示像素的边界（它们
不应该模糊）
object boundaries should always (visually) be aliased to a specific pixel boundary in the display (they should never be blurred)
的模式[Mozilla的]的牺牲
典型地（3），除了边界
在这里我们通过四舍五入的牺牲（1）
宽度以像素边界多少
早。
The one [Mozilla] sacrifices is typically (3), except for borders where we sacrifice (1) by rounding the widths to pixel boundaries much earlier.
见一个JavaScript这个问题，解决这个问题势力一致性：
See this question for a JavaScript fix that forces consistency:
<一个href=\"http://stackoverflow.com/questions/5115637/evenly-distributed-height-of-child-elements-with-css\">Evenly子元素分布高度与CSS
另一个相关的问题：
<一个href=\"http://stackoverflow.com/questions/4308989/are-the-decimal-places-in-a-css-width-respected\">Are在CSS宽度小数尊重？
这篇关于在哪里丢失的像素的百分比CSS布局走？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
