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

Question

在做CSS设计的过程中,我一直想知道一些事情.

css宽度中的小数位是否受到尊重？或者他们四舍五入？

.percentage
{
    width: 49.5%;
}

要么

.pixel
{
    width: 122.5px;
}

Answer 1

如果它是百分比宽度,则是,它受到尊重.正如Martin指出的那样,当你得到小数像素时,事情就会崩溃,但是如果你的百分比值产生整数像素值(例如,例子中200px的50.5%),你就会得到明智的预期行为.

编辑:我已经更新了示例以显示分数像素发生了什么(在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

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

我不知道每个浏览器是否会以相同的方式对其进行舍入.在舍入子像素百分比时,它们似乎都有不同的策略.如果您对不同浏览器中的子像素舍入的细节感兴趣,那么有一篇关于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像素.