尽管分数像素可能会出现在单个元素上(@SkillDrick演示得很好)，但重要的是要知道在实际的盒子模型中，分数像素实际上是受尊重的。

当元素彼此堆叠在一起(或顶部)时，这一点最明显;换句话说，如果我将400个0.5像素的div并排放置，它们的宽度将与单个200像素的div相同。如果它们实际上都四舍五入为1px(查看单个元素会暗示)，我们将期望200px的div是一半长。

这可以在下面的可运行代码片段中看到:

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>

如果它是一个百分比宽度，那么是的，它是受尊重的:

#{外 宽度:200 px; ｝ #第{ 宽度:50%; 高度:20 px; 背景颜色:红色; ｝ #第二{ 宽度:50.5%; 高度:20 px; 背景颜色:绿色; ｝ #第三{ 宽度:51%; 高度:20 px; 背景颜色:蓝色; ｝ < div id = "外" > < div id = "第一" >,< / div > < div id = "二" >,< / div > < div id = "三" >,< / div > < / div >

正如Martin所指出的，当你获得分数像素时，事情就会崩溃，但如果你的百分比值产生整数像素值(例如，在示例中200px的50.5%)，你就会得到合理的、预期的行为。

编辑:我已经更新了示例，以显示发生了什么分数像素(在Chrome的值被截断，所以50,50.5和50.6都显示相同的宽度)。

#percentage { width: 200px; color: white; } #percentage .first { width: 50%; height: 20px; background-color: red; } #percentage .second { width: 50.5%; height: 20px; background-color:green; } #percentage .third { width: 51%; height: 20px; background-color:blue; } #pixels { color: white; } #pixels .first { width: 50px; height: 20px; background-color: red; } #pixels .second { width: 50.5px; height: 20px; background-color:green; } #pixels .third { width: 50.6px; height: 20px; background-color:blue; } #pixels .fourth { width: 51px; height: 20px; background-color:red; } <div id="percentage"> <div class="first">50%=100px</div> <div class="second">50.5%=101px</div> <div class="third">51%=102px</div> </div> <br /> <div id="pixels"> <div class="first">50px</div> <div class="second">50.5px</div> <div class="third">50.6px</div> <div class="fourth">51px</div> </div>

宽度将四舍五入为整数像素。

我不知道是否每个浏览器都能四舍五入。当舍入亚像素百分比时，它们似乎都有不同的策略。如果您对不同浏览器中亚像素舍入的细节感兴趣，ElastiCSS上有一篇很棒的文章。

编辑:出于好奇，我在一些浏览器中测试了@Skilldrick的演示。当使用小数像素值时(不是百分比，它们的工作方式如我链接的文章中所建议的那样)，IE9p7和FF4b7似乎四舍五入到最近的像素，而Opera 11b, Chrome 9.0.587.0和Safari 5.0.3截断了小数点后的位置。我倒不是希望他们有什么共同之处……

元素必须绘制为整数像素，正如其他答案所述，百分比确实是受尊重的。

需要注意的是，像素在这种情况下是指css像素，而不是屏幕像素，所以一个200px的容器和50.7499%的子元素将被四边形化为101px的css像素，然后被渲染到视网膜屏幕上的202px，而不是400 * .507499 ~= 203px。

在此计算中，屏幕密度被忽略，并且没有办法将一个元素绘制到特定的视网膜亚像素大小。你不能让元素的背景或边界呈现小于1个css像素大小，即使实际元素的大小可能小于1个css像素，如Sandy Gifford所示。

[*]你可以使用一些技术，如0.5偏移盒影等，但实际的盒子模型属性将绘制到一个完整的CSS像素。

尽管分数像素可能会出现在单个元素上(@SkillDrick演示得很好)，但重要的是要知道在实际的盒子模型中，分数像素实际上是受尊重的。

当元素彼此堆叠在一起(或顶部)时，这一点最明显;换句话说，如果我将400个0.5像素的div并排放置，它们的宽度将与单个200像素的div相同。如果它们实际上都四舍五入为1px(查看单个元素会暗示)，我们将期望200px的div是一半长。

这可以在下面的可运行代码片段中看到:

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>

它们似乎把值四舍五入到最接近的整数;但是我发现chrome,safari和firefox浏览器不一致。

例如，如果33.3%转换为420.945px

Chrome和firexfox显示为421px。 而 Safari显示为420px。

这看起来像是chrome和firefox遵循地板和天花板的逻辑，而safari没有。 这一页似乎在讨论同样的问题

http://ejohn.org/blog/sub-pixel-problems-in-css/