像素的边缘，浏览器的亚像素渲染差异如何导致布局错乱

浏览器亚像素渲染差异导致的布局错乱

说到布局，首先想到的就是 flex 了。不久后，QA 跑来说，Edge 上布局错乱了。。。每行只有 6 列而不是 7 列，node7 被放到下一行显示了！

        +--------------+--------------+--------------+--------------+--------------+--------------+--------------+
        |  node1  |  node2  |  node3  |  node4  |  node5  |  node6  |  node7  |
        +--------------+--------------+--------------+--------------+--------------+--------------+--------------+
        |  node8  |  node9  |  node10  |  node11  |  node12  |  node13  |  node14  |
        +--------------+--------------+--------------+--------------+--------------+--------------+--------------+

但是，如果我们仔细观察，就会发现，Edge 浏览器在渲染这些节点时，并没有严格按照像素对齐。相反，它在每个节点的边缘添加了一个额外的亚像素。这导致了布局错乱，因为这些额外的亚像素使得节点的宽度略微增加，从而导致第七个节点无法容纳在同一行中。

        +--------------+--------------+--------------+--------------+--------------+--------------+--------------+
        |  node1  |  node2  |  node3  |  node4  |  node5  |  node6  |
        +--------------+--------------+--------------+--------------+--------------+--------------+
        |  node7  |  node8  |  node9  |  node10  |  node11  |  node12  |  node13  |
        +--------------+--------------+--------------+--------------+--------------+--------------+

解决方法

解决这个问题的方法是调整节点的宽度，以适应 Edge 浏览器的亚像素渲染差异。

首先，我们需要计算 Edge 浏览器在渲染这些节点时添加的额外亚像素数。可以通过在 Edge 浏览器中打开一个带有这些节点的页面，然后使用浏览器的开发工具来检查节点的实际宽度。

例如，在我的 Edge 浏览器中，这些节点的实际宽度为 14.25px。这意味着 Edge 浏览器在渲染这些节点时添加了 0.25px 的额外亚像素。

接下来，我们需要调整节点的宽度，以适应这个额外的亚像素。可以通过在 CSS 中设置节点的宽度为 14px。

.node {
  width: 14px;
}

这样，就可以解决 Edge 浏览器中布局错乱的问题了。

总结

不同浏览器在亚像素渲染方面存在差异，这可能会导致布局错乱。可以通过调整元素的宽度来解决这个问题。