电脑浏览器亚像素3D渲染与小数位的选择

1.问题背景

应用rem作尺寸单位时，假定父元素宽度是流式的并列在同一业内2个子元素总宽总和，因此当放大浏览器窗口时，有可能出现子元素总宽总和超出父元素宽度，可能会导致第二个子元素被挤下来。主要原因是电脑浏览器在把rem转为px时会轻微误差，但足够造成合理布局不成功。当搜狗浏览器对话框缩放进569px时，本来应该在一行的2个白框支行了。

现阶段的办法是将父元素display设成table，子元素display设成table-cell，（无需float）。如果一定要用float排序子元素，是否有别的解决方案呢？

2.解决方法

到现在为止，每一个电脑浏览器对小数位的处理方式都不一样。

主要有三种：解决成整数金额、保存4位低或保存15位低。现代浏览器基本上适用保留小数位解决。因为显示屏是通过清晰度模块所组成的，针对低于1像素的一部分，是不能像像素级那般准确地处理，而是采用亚像素3D渲染的形式进行解决。

那样难题知道，需要解决这类问题，那就需要对亚像素的基本原理有一定的了解，提议阅读文章本文：Subpixel rendering。

返回题主的主题风格上去。Rem转px所引起的难题。就这种情况 淘宝网UED的颂晨学生在2015年只做过有关测试与假定。

敢于构想了一下：网页在3D渲染时所作的舍入解决仅仅运用在元素3D渲染规格上，其真正占有空间依然是初始尺寸。

换句话说假如一个元素规格是 0.625px，那其3D渲染规格应当是 1px，空出来的 0.375px 室内空间对其邻近元素添充；一样大道理，假如一个元素规格是 0.375px，其3D渲染规格应该是 0，但其会占有邻近原素 0.375px 空间。于是便沿着这个逻辑证明了下列：

1. 第一个图形的宽为 65.625px，依据四舍五入的基本原则其最后3D渲染宽度为 66px，空出来的 0.375px 由第二个图形补好；
2. 第二个图形往左边补入 0.375px，等同于降低了 0.375px，剩下 65.25px，依据四舍五入的基本原则其最后3D渲染宽度为 65px，多出来的 0.25px 会占有第三个图形空间；
3. 第三个图形被消耗了 0.25px，等同于增强了 0.25px，相当于 65.875px，依据四舍五入的基本原则其最后3D渲染宽度为 66px，空出来的 0.125px 由第四个图形补好；
4. 第四个图形往左边补入 0.125px，等同于降低了 0.125px，剩下 65.5px，依据四舍五入的基本原则其最后3D渲染宽度为 66px，空出来的 0.5px 由第五个图形补好；
5. 第五个图形往左边补入 0.5px，等同于降低了 0.5px，剩下 65.125px，依据四舍五入的基本原则其最后3D渲染宽度为 65px，空出 0.125px；

以上认证与电脑浏览器输入参数完全一致，说明电脑浏览器在对待低像素的情况下并不会直接舍入处理，原素依然占据了应该有的室内空间，仅仅在预估原素规格的情况下进行了舍入解决。

同时在Webkit核心里的LayoutUnit也有做过有关的论述：LayoutUnit - WebKit。

关于 电脑浏览器亚像素3D渲染与小数位的选择，腾讯官方ISUX也是有同学们做了有关方面测试，详尽的文章内容能够阅读文章： 电脑浏览器亚像素3D渲染与小数位的选择。

对于这类合理布局，现阶段解决方案许多，因为现在合理布局不仅仅局限于float、display:table这类的解决方案了。那么你可以考虑到flexbox、grid这类的优质合理布局计划方案。那为什么也不进行谈了。因为这个并不是新东西。即便你对float倾心，那么你可以考虑别的的部门，例如vw这类的部门，这类单位为直接去配对你的浏览器窗口的部门。