浏览器如何处理高度和宽度的非整数值？

Question

当浏览器为非整数值的元素指定宽度和高度时，它们如何处理它们？

特别是

• 在什么阶段，非整数值会被舍入？它们是否舍入到最接近的整数，或截断它们？
• 当容器的子项具有非整数维时，是否会出现子长度或高度之和不等于父元素的内部宽度/高度的情况？
• 是否提供的非整数维度与基于百分比的维度的非整数结果的处理方式不同？
• 填充和边距的非整数值怎么样？
• 编辑： 是执行此舍入的浏览器，还是操作系统？如果它是操作系统，是否会创建浏览器“认为”项目大于其绘制区域的条件，这是否会导致父容器大小调整出现问题？

Answer 1

断言

浏览器旨在处理浮点数和小于一个像素的值。

---

要查看显示浏览器在其计算中使用浮点数的simple example，请创建3％宽度的项目，并在调整其大小时在Chrome开发人员工具中查看其计算属性。

你应该看到这样的事情：

“35.296875”无法通过将一个像素映射到物理显示器（CRT，传统LCD）中的一个像素的显示器精确渲染。然而，较新的高密度显示器使用的比率不同于1-1，这个分数值在概念上可用于提供更高的精度。

即使在低密度显示器上，小数值也可以为subpixel rendering提供一个提示，它使用像素的红色，绿色和蓝色分量使对象的边缘看起来比整个像素值更平滑

但确切地说浏览器将对这些数字做什么是不可预测的。你不能（当前）要求浏览器制作一个31.5px宽的盒子并期望获得一致或甚至有意义的结果。有些浏览器会截断小数值;其他人围绕/向下。

子像素渲染通常用于文本，并且在大多数/所有浏览器中都能很好地工作，但是每个浏览器都以不同的方式实现，并且开发人员可以做很少的事情来影响它的工作方式。

当

  

在什么阶段，非整数值在继承中被舍入   链

大多数/所有计算都是作为浮点数执行的，任何舍入都可能在过程的后期发生，甚至在浏览器的控制之外。例如，浏览器可以将其抗锯齿委托给OS组件（例如IE9 does to Windows Direct2D and DirectWrite）。

CSS过渡可以与OS和/或硬件加速紧密集成。这是另一种情况，我认为浮点值极有可能被浏览器保留并传递给底层。

舍入行为/错误

  

当容器的子元素具有非整数维度时，会存在   永远不会是孩子长度或高度之和的情况   等于父元素的内部宽度/高度？

我在旧版浏览器（IE7）中看到这是百分比计算的结果，50% + 50% > 100%。通常，在您尝试执行更复杂的操作之前，这不是问题。有趣的是，在尝试将HTML元素精确对齐为动画的一部分时，我看到了“一个像素”的错误。

百分比与其他单位

  

提供的非整数维度的处理方式不同   基于百分比的维度的非整数结果？

     

它们是否舍入到最接近的整数，或截断它们？

它有所不同。 This older answer声明它们被截断了，但是（在Chrome 24中）我看到了四舍五入（请注意示例小提琴）。请注意我之前关于同一台计算机上Chrome和Safari之间差异的评论。

  

填充和边距的非整数值怎么样？

同样的规则（或缺乏规则）似乎适用。

标准

我没有找到在所有情况下应如何处理浮点值的标准定义。 closest relevant spec我可以找到关于canvas像素的讨论：

  

当指定坐标没有时，处理像素舍入   完全映射到设备坐标空间不是由此定义的   规范，但以下必须导致不可见   更改渲染：[...条件列表...]

同样，这是来自专门讨论canvas的一节，但它确实暗示：

• 浏览器绝对与分数像素交互。
• 实际实施会有所不同。
• 确实存在一些标准化。
• 映射到设备的显示可能会影响计算。