blocks|key|1059348|text|见这篇文章：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1059349|Are+the+decimal+places+in+a+CSS+width+respected?|offset|length|1059350|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/4308989/are-the-decimal-places-in-a-css-width-respected^0|0|0|1C|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

See this post:

<a href="https://stackoverflow.com/questions/4308989/are-the-decimal-places-in-a-css-width-respected">Are the decimal places in a CSS width respected?</a>

blocks|key|21878|text|它们在象素的天堂里;)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|21879|开玩笑而已。很可能不同的浏览器以不同的方式处理它。|21880|我想到的第一种方法是计算每个区域的宽度。然后把它四舍五入到最近的整数。其余的像素都是空的。|21881|另一种方法，可能是填充最后一个区域，无论它的宽度(有一个小范围的错误)。|21882|非常有趣的问题:用css来控制这种行为可能是件好事。|21883|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|N|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|O|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|P|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|K|$]]

They go in the heaven of pixels ;)

Just joking. Most likely different browsers deal with it in different ways.

The first approach coming in my mind, is to calculate the width of each area. Then round it to the nearest int. The rest of the pixels gets just left empty.

Another approach, could be filling the last area, whatever it is the width (with a small margin of errors).

Very interesting question: it could be nice to have the control over this behaviour with css indeed.

blocks|key|1059401|text|Firefox+4：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1059402|这6个div周围的THe+div有一个边框。当你慢慢调整整个窗口的大小时，你会看到边框“跳跃”。这意味着所有的div都有相同的宽度，但之和小于/大于100%25。当您只调整包含div像素的大小时，您会看到并不是所有的div都同时改变宽度。|1059403|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

Firefox 4:

THe div around these 6 divs has a border. When you slowly resize the whole window you see that the border "jumps". This means all the divs have the same width, but the sum is less/more that 100%.
When you resize just the containing div pixel by pixel, you see that not all the divs change the width simultaneously.

blocks|key|22148|text|取决于您正在使用的浏览器，更改会发生什么。一些浏览器可能会舍弃这个值。有些人强迫它把它集合起来(在一些语言中是math.ceil)，而有些则强迫它向下或“截断”。例如，Google截断小数。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|22149|您可以通过打印筛选，然后在油漆编辑器中检查尺寸(油漆、paint.net、等)轻松地测试这种效果。|22150|然而，非常有趣的问题:)|22151|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

Depending on what browser you are using changes what happens. Some browsers may round the value. Some force it to round up (math.ceil in some langauges) and some round down or "truncate". For example, Google Chrome truncates the decimals.

You can easily test the effects of this by print screening and then later checking the size in a paint editor (paint, paint.net, adobe photoshop, etc.)

Very interesting question, however :)

blocks|key|1080909|text|例如，如果您使用的是%25宽度，并且确切的宽度应该是103.333px，那么浏览器必须决定如何显示该宽度。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1080910|不同的浏览器做出不同的决定，请阅读这些链接以获得更多信息：|1080911|1080912|http://ejohn.org/blog/sub-pixel-problems-in-css/|unordered-list-item|1080913|http://elasticss.com/determination-of-algorithms-used-for-percentage-based-rounding-divs-on-browsers-and-css-frameworks/|1080914|1080915|我特别喜欢John+Resig/David+Baron关于为什么这是一个问题的解释：|1080916|1080917|我和一些Mozilla开发人员讨论了这个问题，David很好地解释了这种情况：|blockquote|1080918|1080919|我们正在尝试满足一系列约束，这些约束不能同时满足(这个证据留给读者作为练习，尽管我可能已经在Bugzilla的评论中写了一次)：|BOLD|1080920|1080921|1080922|4宽度/高度为25%25+(例如)的相邻对象从容器的一条边缘开始，应该准确地结束在另一条边缘；容器中永远不应该有额外的像素，而且它们永远不应该被包装，因为它们是宽|ordered-list-item|1080923|对象的像素，而这些对象在逻辑上是相邻的，应该始终在视觉上触摸；不应存在像素间隔或由于舍入error|1080924|objects而产生的像素重叠，如果相同的宽度应占用相同数量的pixels|1080925|object边界，则应始终(在视觉上)别名为显示中的特定像素边界(不应模糊)|1080926|。|1080927|Mozilla牺牲的通常是(3)，除了我们牺牲(1)的边框外，我们更早地将宽度舍入像素边界。|1080928|有关强制一致性的JavaScript修复，请参阅此问题：|1080929|Evenly+distributed+height+of+child+elements+with+CSS|1080930|另一个相关问题：|1080931|Are+the+decimal+places+in+a+CSS+width+respected?|1080932|entityMap|0|LINK|mutability|MUTABLE|url|1|2|https://stackoverflow.com/questions/5115637/evenly-distributed-height-of-child-elements-with-css|3|https://stackoverflow.com/questions/4308989/are-the-decimal-places-in-a-css-width-respected^0|A|1|O|9|0|0|0|0|1C|0|0|0|3C|1|0|0|0|0|0|0|0|O|0|0|0|0|0|0|0|0|0|0|0|1G|2|0|0|0|1C|3|0^^$0|@$1|2|3|4|5|6|7|1X|8|@$9|1Y|A|1Z|B|C]|$9|20|A|21|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|22|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|23|8|@]|D|@]|E|$]]|$1|I|3|J|5|K|7|24|8|@]|D|@$9|25|A|26|1|27]]|E|$]]|$1|L|3|M|5|K|7|28|8|@]|D|@$9|29|A|2A|1|2B]]|E|$]]|$1|N|3|-4|5|6|7|2C|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|2D|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|2E|8|@]|D|@]|E|$]]|$1|R|3|S|5|T|7|2F|8|@]|D|@]|E|$]]|$1|U|3|-4|5|6|7|2G|8|@]|D|@]|E|$]]|$1|V|3|W|5|6|7|2H|8|@$9|2I|A|2J|B|X]]|D|@]|E|$]]|$1|Y|3|-4|5|6|7|2K|8|@]|D|@]|E|$]]|$1|Z|3|-4|5|6|7|2L|8|@]|D|@]|E|$]]|$1|10|3|11|5|12|7|2M|8|@]|D|@]|E|$]]|$1|13|3|14|5|12|7|2N|8|@]|D|@]|E|$]]|$1|15|3|16|5|12|7|2O|8|@]|D|@]|E|$]]|$1|17|3|18|5|12|7|2P|8|@]|D|@]|E|$]]|$1|19|3|1A|5|6|7|2Q|8|@]|D|@]|E|$]]|$1|1B|3|1C|5|6|7|2R|8|@]|D|@]|E|$]]|$1|1D|3|1E|5|6|7|2S|8|@]|D|@]|E|$]]|$1|1F|3|1G|5|6|7|2T|8|@]|D|@$9|2U|A|2V|1|2W]]|E|$]]|$1|1H|3|1I|5|6|7|2X|8|@]|D|@]|E|$]]|$1|1J|3|1K|5|6|7|2Y|8|@]|D|@$9|2Z|A|30|1|31]]|E|$]]|$1|1L|3|-4|5|6|7|32|8|@]|D|@]|E|$]]]|1M|$1N|$5|1O|1P|1Q|E|$1R|J]]|1S|$5|1O|1P|1Q|E|$1R|M]]|1T|$5|1O|1P|1Q|E|$1R|1U]]|1V|$5|1O|1P|1Q|E|$1R|1W]]]]

If, for example, you're using a <code>%</code> width, and the exact width should be <code>103.333px</code>, then the browser must make a decision on how display that.

Different browsers make different decisions, read these links for more information:

<ul>
<li><a href="http://ejohn.org/blog/sub-pixel-problems-in-css/" rel="noreferrer">http://ejohn.org/blog/sub-pixel-problems-in-css/</a></li>
<li><a href="http://elasticss.com/determination-of-algorithms-used-for-percentage-based-rounding-divs-on-browsers-and-css-frameworks/" rel="noreferrer">http://elasticss.com/determination-of-algorithms-used-for-percentage-based-rounding-divs-on-browsers-and-css-frameworks/</a></li>
</ul>

I particularly like this explanation from John Resig/David Baron of why this is even a problem:

<blockquote>
 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):
 
 <ol>
 <li>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</li>
 <li>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</li>
 <li>objects given the same width should occupy the same number of pixels</li>
 <li>object boundaries should always (visually) be aliased to a specific
 pixel boundary in the display (they
 should never be blurred)</li>
 </ol>
 
 The one [Mozilla] sacrifices is
 typically (3), except for borders
 where we sacrifice (1) by rounding the
 widths to pixel boundaries much
 earlier.
</blockquote>

See this question for a JavaScript fix that forces consistency:

<a href="https://stackoverflow.com/questions/5115637/evenly-distributed-height-of-child-elements-with-css">Evenly distributed height of child elements with CSS</a>

Another relevant question:

<a href="https://stackoverflow.com/questions/4308989/are-the-decimal-places-in-a-css-width-respected">Are the decimal places in a CSS width respected?</a>

<blockquote>
 Possible Duplicate: 
 <a href="https://stackoverflow.com/questions/5115637/evenly-distributed-height-of-child-elements-with-css">Evenly distributed height of child elements with CSS</a> 
</blockquote>



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. 

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.

Here is my testcase: 
<a href="http://jsfiddle.net/dhQh2/" rel="noreferrer">http://jsfiddle.net/dhQh2/</a> (Just resize the window to get a result)

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?

Where do the lost pixels go in a percent CSS layout?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

 可能重复：假设我有一个6个DIVs的设计，它的宽度为16.666%。因此，文档大小被分成6个部分。现在，如果我有一个文档大小为620 if宽，这将使每个部分103.333px。因为我不知道可以显示部分像素的屏幕:)，我想知道浏览器是如何处理部分像素的。下面是我的测试案例： (只需调整窗口大小以获得结果)当调整大小时，...

问在百分比CSS布局中，丢失的像素到哪里去？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在百分比CSS布局中，丢失的像素到哪里去？EN