Possible Duplicate:@H_502_6@ 07000
让我说我有一个设计,有6个DIVs,浮动左边,宽度为16.666%。@H_502_6@因此文档大小分为6部分。
现在如果我有一个文档大小可以说620px宽,这将使每个部分103.333px。因为我不知道可以显示部分像素的屏幕:)我想知道浏览器如何处理部分像素。
这是我的测试用例:@H_502_6@http://jsfiddle.net/dhQh2/(只需调整窗口大小以获得结果)
当调整大小时,6 DIV保持相同的大小。但有些情况不可能。浏览器如何处理这些部分PX值?
解决方法
不同的浏览器做出不同的决定,阅读这些链接了解更多信息:
> http://ejohn.org/blog/sub-pixel-problems-in-css/@H_502_6@> http://elasticss.com/determination-of-algorithms-used-for-percentage-based-rounding-divs-on-browsers-and-css-frameworks/
我特别喜欢John Resig / David Baron的这个解释,为什么这甚至是一个问题:
I was talking this over with some@H_502_6@ Mozilla developers and David Baron@H_502_6@ explained the situation quite well:
We’re trying to meet a bunch of@H_502_6@ constraints that can’t all be@H_502_6@ satisfied at the same time (the proof@H_502_6@ is left as an exercise to the reader,@H_502_6@ though I may have actually written it@H_502_6@ out once in a Bugzilla comment):
4 adjacent objects of width/height 25% (for example) starting at one edge@H_502_6@ of a container should end exactly at@H_502_6@ the other edge; there should never be@H_502_6@ an extra pixel in the container and@H_502_6@ they should never be wrapped due to@H_502_6@ being a pixel to wide
objects that are logically adjacent should always touch visually; there@H_502_6@ should never be a pixel gap or a pixel@H_502_6@ 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@H_502_6@ pixel boundary in the display (they@H_502_6@ should never be blurred)
The one [Mozilla] sacrifices is@H_502_6@ typically (3),except for borders@H_502_6@ where we sacrifice (1) by rounding the@H_502_6@ widths to pixel boundaries much@H_502_6@ earlier.
看到这个问题,一个强制一致的JavaScript修复:
Evenly distributed height of child elements with CSS
另一个相关问题: