Question

我在做CSS设计的过程中一直想知道的东西。

css宽度中的小数位是否受到尊重？或者它们是圆形的吗？

.percentage
{
    width: 49.5%;
}

或

.pixel
{
    width: 122.5px;
}

Answer 1

如果是百分比宽度，则为yes, it is respected。正如Martin指出的那样，当你得到小数像素时，事情就会崩溃，但是如果你的百分比值产生整数像素值（例如，例子中200px的50.5％），你就会得到明智的预期行为。

编辑：我updated the example to show what happens to fractional pixels（在Chrome中，值被截断，因此50,50.5和50.6都显示相同的宽度）。

Answer 2

即使在绘制页面时对数字进行舍入，完整值也会保留在内存中并用于后续子计算。例如，如果您的100.4999px的盒子绘制为100px，则宽度为50％的子项将计算为.5 * 100.4999而不是.5 * 100。等等更深层次。

我创建了深度嵌套的网格布局系统，其中父项宽度为ems，子项为百分比，并且上游包含最多四个小数点具有明显影响。

边缘情况，当然，但要记住一些事情。

Answer 3

虽然分数像素可能看起来在各个元素上向上舍入（因为 @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>

Answer 4

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

我不知道每个浏览器是否会以相同的方式对其进行舍入。在舍入子像素百分比时，它们似乎都有不同的策略。如果您对不同浏览器中的子像素舍入细节感兴趣，可以an excellent article on ElastiCSS。

编辑：为了好奇，我在某些浏览器中测试了@ Skilldrick的演示。当使用小数像素值（不是百分比，它们按照我链接的文章中的建议工作）时，IE9p7和FF4b7似乎四舍五入到最近的像素，而Opera 11b，Chrome 9.0.587.0和Safari 5.0.3截断小数位。不是说我希望他们毕竟有共同点......

Answer 5

他们似乎将值四舍五入到最接近的整数;但是我看到了chrome，safari和firefox的不一致。

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

chrome和firexfox将其显示为421px。而 safari显示为420px。

这似乎是chrome和firefox跟随地板和ceil逻辑，而safari没有。这个页面似乎讨论了同样的问题

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

Answer 6

元素必须绘制为整数个像素，并且正如其他答案所涵盖的那样，百分比确实受到尊重。

一个重要的注意事项是像素在这种情况下意味着 css像素，而不是屏幕像素，因此具有50.7499％子项的200px容器将四舍五入为101px css像素，然后在视网膜屏幕上渲染到202px，不 400 * .507499~ = 203px。

在此计算中忽略屏幕密度，并且无法将*元素绘制到特定的视网膜子像素大小。您不能将元素的背景或边框渲染为小于1 css像素大小，即使实际元素的大小可能小于1 css像素，如Sandy Gifford所示。

[*]您可以使用0.5偏移框阴影等技术，但实际的框模型属性将绘制为完整的CSS像素。

CSS宽度中的小数位是否受到尊重？

6 个答案: