结论：应统一使用 transform:scale() 替代 zoom，因 Firefox 完全不支持非标准属性 zoom；需配合 transform-origin、父容器尺寸补偿及多前缀声明实现跨浏览器兼容，并注意缩放后坐标系分离问题。
直接说结论：不要混用 zoom 和 transform:scale()，选一个并统一处理兼容性；火狐（Firefox）完全不支持 zoom，必须用 transform 替代。
为什么 zoom 在 Firefox 里直接失效？
因为 zoom 是 IE 时代遗留的非标准属性，W3C 从未将其纳入 CSS 规范。Firefox 从一开始就没实现它，Chrome/Safari 虽然支持，但属于“厂商私有行为”，不能当作跨浏览器方案。当你在 CSS 里写 zoom: 0.8，Firefox 会静默忽略，连警告都不报（除非开了开发者工具的 CSS 验证），页面就按未缩放渲染——这往往导致布局错位、文字挤出容器、右侧空白等现象。
transform:scale() 缩放后右边留白怎么解决？
这是最常踩的坑：transform:scale(0.8) 不改变元素盒模型尺寸，只是视觉缩放，但父容器仍按原始宽高分配空间，缩放后内容变小，右边/底部就空出来了。解决思路不是“隐藏滚动条”，而是主动补偿缩放带来的偏移：
- 用
transform-origin: top left锚定左上角，避免默认居中缩放导致内容“飘”进可视区外 - 给缩放容器加
width: 125%; height: 125%（即1 / 0.8），让父容器撑开适配缩放后实际显示区域 - 如果缩放的是
body，建议改用包裹一层<div class="scaled-root">，再对它应用transform，避免影响html/body的全局布局计算
如何写出真正兼容 Chrome/Firefox/Edge 的缩放代码？
靠前缀 + 媒体查询判断内核已过时，现代写法是直接多行声明，让浏览器自行选择生效项：
立即学习“前端免费学习笔记（深入）”；
body {
transform: scale(0.8);
transform-origin: top left;
/* Firefox */
-moz-transform: scale(0.8);
-moz-transform-origin: top left;
/* Safari/旧版 Chrome */
-webkit-transform: scale(0.8);
-webkit-transform-origin: top left;
/* IE9+ */
-ms-transform: scale(0.8);
-ms-transform-origin: top left;
}注意：-o-transform（Opera）可省略，当前 Opera 已基于 Chromium；zoom 行必须删掉，否则在 Firefox 中无效且可能干扰其他样式解析。
缩放后锚点定位、滚动位置不准怎么办？
因为 transform:scale() 不改变 DOM 几何尺寸，getBoundingClientRect()、scrollIntoView() 等 API 返回的仍是原始坐标。例如组件放大 1.25 倍后，element.offsetTop 还是原来值，但视觉位置已下移。常见解法：
- 缩放后手动计算偏移：用
element.getBoundingClientRect().top * 1.25再调用window.scrollTo() - 对需要锚点跳转的元素，额外加一层 wrapper，并只对内容层缩放，保持 wrapper 尺寸不变
- 避免对
body或整页根节点使用transform:scale()，它会让所有相对定位、固定定位行为失准
真正难处理的不是写法，而是缩放后交互坐标系和视觉坐标系分离——这点容易被忽略，直到点击区域错位、tooltip 偏移、canvas 绘图比例混乱才暴露出来。
