CSS：Em 舍入错误

Question

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

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

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

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

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

Answer 1

不一致的舍入 = 平滑缩放

浏览器有时可能会向上舍入某个值，而有时会向下舍入相同的值，以使整个舍入操作均等。

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

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

示例

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

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

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

浏览器支持

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

这种方法（非常适合页面缩放）可能与您遇到的行为类型相同，尽管乍一看可能并不明显为什么会发生这种情况。

Answer 2

从这个意义上说，它们并没有真正坏掉。不同的浏览器只是以不同的方式实现像素舍入。

如果您需要如此细粒度的测量，最好使用不以十进制值结尾的较粗略的值，或者使用精确的像素值而不是 ems。请记住，ems 是相对数量；它们是为缩放而设计的，而不是用于需要精度的情况。