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

Question

当浏览器被赋予非整数值的元素的宽度和高度时,它们如何处理它们？

特别是,

Answer 1

断言

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

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

你应该看到这样的东西:

在此输入图像描述

"35.296875"无法通过将一个像素映射到物理显示器(CRT,传统LCD)中的一个像素的显示器精确渲染.然而,较新的高密度显示器使用与1-1不同的比率,并且该分数值可以在概念上用于提供更高程度的精度.

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

但究竟是什么浏览器会做这样的数字是不是很预见的.你不能(当前)要求浏览器制作一个31.5px宽的盒子,并期望得到一致或甚至有意义的结果.有些浏览器会截断小数值; 其他人围绕/向下.

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

在什么阶段,非整数值在继承链中得到舍入？

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

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

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

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

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

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

它有所不同.这个较旧的答案表明它们被截断了,但是(在Chrome 24中)我看到了四舍五入(请注意示例小提琴).请注意我之前关于Chrome和Safari在同一台计算机上的差异的评论.

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

同样的规则(或缺乏规则)似乎适用.

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

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

同样,这是专门针对的一节canvas,但它确实暗示: