38

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

尤其，

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

1 回答 1

61

断言

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

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

您应该看到如下内容：

在此处输入图像描述

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

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

但浏览器究竟会如何处理这些数字并不是很容易预测。您（目前）不能要求浏览器制作一个 31.5 像素宽的框并期望得到一致甚至有意义的结果。一些浏览器会截断小数值；其他人向上/向下舍入。

子像素渲染通常用于文本，并且在大多数/所有浏览器中都能很好地工作，但每个浏览器的实现方式不同，开发人员几乎无法影响其工作方式。

什么时候

非整数值在继承链中的哪个阶段四舍五入？

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

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

舍入行为/错误

当容器的子元素具有非整数尺寸时，是否会出现子元素长度或高度的总和不等于父元素的内部宽度/高度的情况？

作为百分比计算的结果，我在旧浏览器（IE7）中看到了这一点，其中50% + 50% > 100%. 通常在你尝试做一些更复杂的事情之前这不是问题。有趣的是，在尝试将 HTML 元素作为动画的一部分进行精确对齐时，我已经看到了“偏移一个像素”的错误。

百分比与其他单位

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

它们是四舍五入到最接近的整数，还是截断它们？

它因人而异。这个较旧的答案指出它们被截断，但是（在 Chrome 24 中）我看到了舍入（注意示例小提琴）。请注意我之前关于同一台机器上 Chrome 和 Safari 之间差异的评论。

填充和边距的非整数值呢？

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

标准

我还没有找到在所有情况下如何处理浮点值的标准定义。我能找到的最接近的相关规范canvas是关于像素的：

本规范未定义当指定坐标未精确映射到设备坐标空间时的像素舍入处理，除非以下内容必须导致渲染没有可见的变化：[...条件列表...]

同样，这是来自专门处理 的部分canvas，但它确实暗示：

  • 浏览器绝对与小数像素交互。
  • 实际实现会有所不同。
  • 确实存在一些标准化。
  • 映射到设备的显示屏可能会影响计算。
于 2013-03-08T17:54:45.977 回答