CSS: Em 舍入误差

Question

最近，我重写了我正在制作的网站的 CSS 文件，并尝试使用 em 而不是 px 使大多数元素和字体的大小动态变化。尺寸可行……有点，但至少有一个问题。

当使用 em 单位作为框的边距(边距:0.25em)时，在 Firefox 中，我在顶部/左侧得到 4px，在右侧/底部得到 3px - 基于 14px 字体大小(实际上是框的字体大小为浏览器的 16px 的 0.875em)。

现在，我是 em 的新手，很可能我误解了几件事，但根据我的理解，我认为 14px 的 0.25em 是 3.5px。如果是这种情况，并且四舍五入是边距中 4 或 3 个像素的原因，那么它真的应该如何工作吗？具有四舍五入结果的特定计算应该每次都以完全相同的方式进行四舍五入，不是吗？此外，在 Internet Explorer 中，它恰恰相反:顶部/左侧为 3px，右侧/底部为 4px。我尝试将值更改为 0.286em(x 14px -> 4.004px)以避免恰好半个像素结束，这在 Firefox 中结果为 4/4/4/4，但在 IE 中结果为 4/3/4/3。

除了这些像素错误，更改浏览器字体大小实际上可以很好地缩放所有内容。

我是不是疯了，我是不是误解了什么，两个浏览器都坏了还是……什么？ (使用 IE8 和 FF3 和 19。)

Answer 1

不一致的舍入 = 平滑缩放

浏览器有时可能会向上舍入某个值，而有时会向下舍入相同的值，因此在整个舍入操作中是均匀的。

最好的例子是缩放页面。页面通常在移动设备上缩放，但如果用户手动缩放页面，也可以在桌面浏览器上缩放。缩放页面时，以前是整数的 px 值现在是浮点值。同样，过去用于转换为 px 整数值的 em 或 % 值现在转换为浮点值。

为了使浏览器能够根据屏幕像素绘制元素的大小或位置，它必须将每个值四舍五入为整数。舍入只有在整体上均匀时才有效。

示例

假设您有 3 个 float div，每个 100px，组合宽度为 300px。该页面在移动设备上缩放为通常大小的 2/3。缩放后的 div 的组合宽度应为 200px。

如果(大致)66.7px 对每个缩放的 div 进行四舍五入，则每个都将为 67px，加起来为 201px (1 太多)。如果每个 div 都向下舍入，则每个都是 66px，加起来就是 198px(2 太少了)。使大小加起来达到 200px 的唯一方法是四舍五入不一致(将其中两个向上舍入，将另一个向下舍入)。

当缩放应用到具有位置和大小值的绝对定位元素，或者应用到具有从 sprite 文件中获取的背景图像的元素时，缩放元素的四舍五入的任何不均匀性都会非常明显。

浏览器支持

我上次检查时，Firefox 是唯一能够有效缩放页面的浏览器，能够以正确的方式平衡四舍五入的值。其他浏览器可能会做一些这样的事情(并希望在这方面做得更好)，但过去做得并不好。

这种方法 - 对于页面缩放非常有效 - 可能与您遇到的行为类型相同，尽管乍一看可能并不明显为什么会发生。