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

Question

<分区>

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 对为什么这甚至是一个问题的解释:

I was talking this over with some Mozilla developers and David Baron explained the situation quite well:

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):

1. 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

2. 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

3. objects given the same width should occupy the same number of pixels

4. object boundaries should always (visually) be aliased to a specific pixel boundary in the display (they should never be blurred)

The one [Mozilla] sacrifices is typically (3), except for borders where we sacrifice (1) by rounding the widths to pixel boundaries much earlier.

有关强制一致性的 JavaScript 修复，请参阅此问题:

Evenly distributed height of child elements with CSS

另一个相关问题:

Are the decimal places in a CSS width respected?