9

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

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

4

2 回答 2

9

不一致的舍入 = 平滑缩放

浏览器有时可能会将某个值向上舍入，而在其他时候将相同的值向下舍入，从而在整个舍入操作上保持平衡。

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

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

例子

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

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

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

浏览器支持

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

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

于 2013-04-06T03:56:51.180 回答
3

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

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

于 2013-04-06T01:41:01.757 回答