是否遵守CSS宽度的小数位数？

225

我在进行CSS设计时一直想知道的东西。

是否遵守CSS宽度的小数位？还是四舍五入？

.percentage {
  width: 49.5%;
}

要么

.pixel {
  width: 122.5px;
}
html  css 
— 阿拉斯泰尔·皮茨
source

Answers:

186

如果是百分比宽度，那么可以，它是受尊重的。正如Martin所指出的，当您达到小数像素时，事情就会崩溃，但是如果百分比值产生整数像素值（例如，示例中200px的50.5％），您将获得明智的预期行为。

编辑：我已经更新了示例，以显示小数像素发生了什么（在Chrome中，值被截断了，所以50、50.5和50.6都显示相同的宽度）。

— 技艺大师
source
7
您是正确的，百分比值本身不会四舍五入，但是带小数位的像素宽度和百分比计算的最终结果将始终四舍五入为整个像素：)
— MartinodF 2010年
2
@MartinodF感谢您的澄清。是的，像素是四舍五入的，但是并没有定义它们是否实际上四舍五入到最近的，地板的或天花板的（这就是我所说的“事物分解”）。
— Skilldrick
1
@Skilldrick我出于好奇而尝试在一些浏览器中的小数像素：IE9p7和FF4b7都舍入到最接近的像素，而Opera 11b，Chrome 9.0.587.0和Safari 5.0.3则截断了该值。@andras只是为了澄清一下：我并不是说内部值是四舍五入的，只是最终的渲染值是四舍五入的。如果缩放或某些元素继承属性等，则该小数位将计数。
— MartinodF 2010年
10
现代更新：我的Chrome版本24实际上舍入了小数像素。查看jsFiddle，50.5和50.6都向上取整为51px，比50px div宽1个像素。
— Michael Butler
5
可能最需要注意的是具有小数像素尺寸的元素如何彼此相邻堆叠。尽管它们本身在视觉上会取整，但在与其他比例尺寸的元素相邻
— Sandy Gifford
52

即使在绘制页面时将数字四舍五入，完整值仍保留在内存中，并用于后续子计算。例如，如果将100.4999px的框绘制为100px，则其宽度为50％的子级将被计算为.5 * 100.4999而不是.5 * 100。依此类推，直至更深层次。

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

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

— 纳特科奇利
source
2
公认的答案比这个答案更完整，但是这个故事的轶事使我对技术含义如何使自己有更好的感觉。感谢您发布。
— 汤姆（Tom）
23

尽管小数像素可能会在单个元素上四舍五入（如@SkillDrick演示得很好），但重要的是要知道小数像素在实际的box模型中实际上受到尊重。

当元素彼此相邻（或位于顶部）堆叠时，最好地看出这一点。换句话说，如果我并排放置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>
展开摘要

— 桑迪·吉福德
source
11
关于渲染：在您的示例中，每个像素竞争两个div。在这种情况下，您的浏览器将选择其中之一来渲染整个像素-避免模糊和其他怪异的伪像。如果使用:nth-child(even)或将像素的一半设置为蓝色，:nth-child(odd)则会注意到整个物体是橙色或整个物体是蓝色-不是蓝色和橙色的混合物（这会是模糊的紫色）。
— Daan Wilmer
16

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

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

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

— 马丁诺德
source
7

它们似乎将这些值四舍五入为最接近的整数。但Iam发现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/

— 再次
source
6

元素必须绘制到整数个像素，并且在涵盖其他答案时，确实要遵守百分比。

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

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

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

— 奥列克斯·波诺马连科（Olex Ponomarenko）
source
出色的观察
— 8
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.