Html 是否尊重 CSS 宽度中的小数位？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4308989/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Are the decimal places in a CSS width respected?
提问by Alastair Pitts
Something I've been wondering for a while whilst doing CSS design.
我在做 CSS 设计时一直想知道的事情。
Are decimal places in CSS widths respected? Or are they rounded?
是否尊重 CSS 宽度中的小数位？或者它们是圆形的？
.percentage {
width: 49.5%;
}
or
或者
.pixel {
width: 122.5px;
}
采纳答案by Skilldrick
If it's a percentage width, then yes, it is respected. As Martin pointed out, things break down when you get to fractional pixels, but if your percentage values yield integer pixel value (e.g. 50.5% of 200px in the example) you'll get sensible, expected behaviour.
如果它是百分比宽度，那么是的，它是受尊重的。正如 Martin 指出的那样，当您获得小数像素时，事情就会崩溃，但是如果您的百分比值产生整数像素值（例如，示例中 200px 的 50.5%），您将获得合理的预期行为。
Edit:I've updated the example to show what happens to fractional pixels(in Chrome the values are truncated, so 50, 50.5 and 50.6 all show the same width).
编辑：我更新了示例以显示小数像素会发生什么（在 Chrome 中，值被截断，因此 50、50.5 和 50.6 都显示相同的宽度）。
回答by natekoechley
Even when the number is rounded when the page is painted, the full value is preserved in memory and used for subsequent child calculation. For example, if your box of 100.4999px paints to 100px, it's child with a width of 50% will be calculated as .5*100.4999 instead of .5*100. And so on to deeper levels.
即使在绘制页面时对数字进行四舍五入，完整值也会保留在内存中并用于后续的子计算。例如，如果您的 100.4999px 框绘制为 100px，则宽度为 50% 的子项将计算为 .5*100.4999 而不是 .5*100。等等更深层次。
I've created deeply nested grid layout systems where parents widths are ems, and children are percents, and including up to four decimal points upstream had a noticeable impact.
我已经创建了深度嵌套的网格布局系统，其中父级宽度是 em，子级是百分比，并且上游最多包含四个小数点会产生明显的影响。
Edge case, sure, but something to keep in mind.
边缘情况，当然，但要记住一些事情。
回答by Sandy Gifford
Although fractional pixels may appear to round up on individual elements (as @SkillDrickdemonstrates very well) it's important to know that the fractional pixels are actually respected in the actual box model.
尽管小数像素可能会在单个元素上四舍五入（正如@SkillDrick 很好地演示的那样），但重要的是要知道小数像素实际上在实际的盒模型中受到尊重。
This can best be seen when elements are stacked next to (or on top of) each other; in other words, if I were to place 400 0.5 pixel divs side by side, they would have the same width as a single 200 pixel div. If they all actuallyrounded up to 1px (as looking at individual elements would imply) we'd expect the 200px div to be half as long.
当元素彼此相邻（或顶部）堆叠时，可以最好地看到这一点；换句话说，如果我将 400 个 0.5 像素的 div 并排放置，它们的宽度将与单个 200 像素的 div 相同。如果它们实际上都四舍五入到 1px（正如查看单个元素所暗示的那样），我们希望 200px div 的长度是其一半。
This can be seen in this runnable code snippet:
这可以在这个可运行的代码片段中看到：
body {
color: white;
font-family: sans-serif;
font-weight: bold;
background-color: #334;
}
.div_house div {
height: 10px;
background-color: orange;
display: inline-block;
}
div#small_divs div {
width: 0.5px;
}
div#large_div div {
width: 200px;
}<div class="div_house" id="small_divs">
<p>0.5px div x 400</p>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<br>
<div class="div_house" id="large_div">
<p>200px div x 1</p>
<div></div>
</div>回答by MartinodF
The width will be rounded to an integer number of pixels.
宽度将四舍五入为整数像素。
I don't know if every browser will round it the same way though. They all seem to have a different strategy when rounding sub-pixel percentages. If you're interested in the details of sub-pixel rounding in different browsers, there's an excellent article on ElastiCSS.
我不知道是否每个浏览器都会以同样的方式舍入它。在四舍五入子像素百分比时，它们似乎都有不同的策略。如果您对不同浏览器中子像素舍入的详细信息感兴趣，可以在 ElastiCSS 上找到一篇出色的文章。
edit: I tested @Skilldrick's demo in some browsers for the sake of curiosity. When using fractional pixelvalues (not percentages, they work as suggested in the article I linked) IE9p7 and FF4b7 seem to round to the nearest pixel, while Opera 11b, Chrome 9.0.587.0 and Safari 5.0.3 truncate the decimal places. Not that I hoped that they had something in common after all...
编辑：出于好奇，我在某些浏览器中测试了@Skilldrick 的演示。当使用分数像素值（不是百分比，它们按照我链接的文章中的建议工作）时，IE9p7 和 FF4b7 似乎四舍五入到最近的像素，而 Opera 11b、Chrome 9.0.587.0 和 Safari 5.0.3 会截断小数位。并不是说我希望他们毕竟有什么共同点......
回答by agaase
They seem to round up the values to the closest integer; but Iam seeing inconsistency in chrome,safari and firefox.
他们似乎将值四舍五入到最接近的整数；但我看到 chrome、safari 和 firefox 不一致。
For e.g if 33.3% converts to 420.945px
例如，如果 33.3% 转换为 420.945px
chrome and firexfox show it as 421px. while safari shows its as 420px.
chrome 和 firexfox 将其显示为 421px。而 safari 显示为 420px。
This seems like chrome and firefox follow the floor and ceil logic while safari doesn't. This page seems to discuss the same problem
这似乎 chrome 和 firefox 遵循地板和天花板逻辑，而 safari 则没有。这个页面似乎讨论了同样的问题
回答by Olex Ponomarenko
Elements have to paint to an integer number of pixels, and as the other answers covered, percentages are indeed respected.
元素必须绘制到整数个像素，并且正如其他答案所涵盖的那样，确实尊重百分比。
An important note is that pixelsin this case means css pixels, not screen pixels, so a 200px container with a 50.7499% child will be rounded to 101px css pixels, which then get rendered onto 202px on a retina screen, and not400 * .507499 ~= 203px.
一个重要的注意事项是像素在这种情况下表示css 像素，而不是屏幕像素，因此具有 50.7499% 子元素的 200px 容器将被四舍五入为 101px css pixel，然后在视网膜屏幕上呈现为 202px ，而不是400 * 。 507499 ~= 203px。
Screen density is ignored in this calculation, and there is no way to paint* an element to specific retina subpixel sizes. You can't have elements' backgrounds or borders rendered at less than 1 css pixelsize, even though the actual element's size could be less than 1 css pixel as Sandy Gifford showed.
在此计算中会忽略屏幕密度，并且无法将元素绘制*为特定的视网膜子像素大小。你不能让元素的背景或边框以小于 1 css 像素大小呈现，即使实际元素的大小可能小于 1 css 像素，如 Sandy Gifford 所示。
[*] You can use some techniques like 0.5 offset box-shadow, etc, but the actual box model properties will paint to a full CSS pixel.
[*] 您可以使用一些技术，例如 0.5 偏移框阴影等，但实际的框模型属性将绘制为完整的 CSS 像素。
