是否尊重CSS宽度的小数位？
在CSSdevise的时候我一直在想一些东西。
在CSS宽度的小数位是否受到尊重？ 还是他们四舍五入？
.percentage { width: 49.5%; } 要么
.pixel { width: 122.5px; }
如果它是一个百分比的宽度，那么是的，这是值得尊重的 。 正如马丁指出的那样，当你得到小数像素的时候事情就会崩溃，但是如果你的百分比值产生了整数像素值（例如在这个例子中为200px的50.5％），你会得到明智的，预期的行为。
编辑：我已经更新了示例以显示分数像素发生了什么 （在Chrome中的值被截断，所以50,50.5和50.6都显示相同的宽度）。
即使在页面被绘制时四舍五入，完整的值也被保存在内存中并用于后续的子计算。 例如，如果您的100.4999像素的框为100px，则其宽度为50％的子项将被计算为.5 * 100.4999而不是.5 * 100。 等到更深层次。
我已经创build了深度嵌套的网格布局系统，父母的宽度是ems，孩子是百分比，在上游的小数点后四位有明显的影响。
边缘的情况下，当然，但要记住的东西。
虽然小数像素可能会出现在各个元素上（如@SkillDrick演示得非常好）， 但重要的是要知道在实际的盒子模型 中小 数像素实际上是受到尊重的 。
当元素堆叠在彼此旁边（或顶部）时，这可以被最好地看到; 换句话说，如果我并排放置400个0.5像素的div，它们将具有与单个200个像素div相同的宽度。 如果他们实际上四舍五入到1px（因为看个别元素意味着），我们预计200px div是一半长。
这可以在这个CSSDesk草图中看到，
或者如果您想在较旧的浏览器（不受CSSDesk支持）上testing它，可以使用以下标记/ CSS：
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>
宽度将被四舍五入为整数个像素 。
我不知道是否每个浏览器都会以相同的方式进行调整。 四舍五入的子像素百分比似乎都有不同的策略。 如果您对不同浏览器中的子像素四舍五入的细节感兴趣，那么在ElastiCSS上有一篇优秀的文章 。
编辑 ：为了好奇，我在一些浏览器中testing了@ Skilldrick的演示。 当使用分数像素值（不是百分比，它们按照我链接的文章中的build议工作）IE9p7和FF4b7似乎四舍五入到最接近的像素，而Opera 11b，Chrome 9.0.587.0和Safari 5.0.3截断小数位。 不是我希望他们毕竟有共同的东西…
他们似乎把价值整理到最接近的整数。 但我看到在铬，Safari和Firefox的不一致。
例如，如果33.3％转换为420.945px
铬和firexfox显示为421px。 而Safari则显示为420px。
这看起来像铬和火狐跟随地板和细胞逻辑，而Safari浏览器不。 这个页面似乎讨论了同样的问题
元素必须绘制为整数个像素，并且在其他答案覆盖的情况下，百分比确实受到尊重。
一个重要的注意事项是在这种情况下的像素意味着CSS像素 ，而不是屏幕像素，所以具有50.7499％孩子的200像素的容器将被舍入为101 像素的CSS像素 ，然后渲染到202像素在视网膜屏幕上，而不是 400 *。 507499〜= 203px。
在这个计算中，屏幕密度被忽略，并且没有办法将元件的大小设置为特定的视网膜子像素大小。 尽pipe像Sandy Gifford所显示的那样，实际元素的大小可能小于1css像素 ，但是不能有像素大小小于1css的元素的背景或边框。
有趣的是，在natekoechley的答复和Olex Ponomarenko的答复之间，确切的价值存储在内存中，并考虑到一些事情，但不是全部。
