丢失的像素在百分比 CSS 布局中去了哪里? [英] Where do the lost pixels go in a percent CSS layout?
问题描述
可能的重复:
使用 CSS 均匀分布子元素的高度
假设我有一个带有 6 个 DIV 的设计，这些 DIV 是浮动的，宽度为 16.666%.所以文档大小被分成 6 部分.
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.
现在，如果我的文档大小为 620 像素宽，这将使每个部分为 103.333 像素.因为我不知道可以显示部分像素的屏幕 :) 我想知道浏览器如何处理部分像素.
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/
我特别喜欢 John Resig/David Baron 关于为什么这甚至是一个问题的解释:
I particularly like this explanation from John Resig/David Baron of why this is even a problem:
我正在和一些人讨论这个Mozilla 开发人员和 David Baron很好地说明了情况:
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):
从一侧开始，宽度/高度为 25%(例如)的 4 个相邻对象容器的结尾应该正好在另一边；永远不应该有容器中的额外像素和他们不应该被包裹，因为一个像素到宽
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:
另一个相关问题:
这篇关于丢失的像素在百分比 CSS 布局中去了哪里?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
