变换比跨浏览器缩放更具可预测性。

在不同的浏览器中，缩放对 * 定位 * 的影响不同。

示例：position:absolute; left:50px; zoom: 50%;

• Chrome会有效地将left值计算为50px * 50%，即25px...但这不会反映在DevTools的计算值中。
• IE根本不会更改left值。
  在所有浏览器中，转换的处理方式都相同（据我所知）。

示例：position:absolute; left:50px; transform: scale(0.5)

• left在Chrome和IE中实际上都将设置为25px。（DevTools计算值不会反映这一点-它将只显示源代码）
• 为了避免改变left的值，只需使用transform-origin: 0 0，这样可以确保left仍然是50 px。

演示：http://jsfiddle.net/4z728fmk/显示2个框，其中小的一个被缩放或缩放到50%。看起来像这样：

编辑：2016年添加了Firefox。当时它是三款浏览器中问题最多的一款，因为zoom:50%完全没有效果。而且transform: scale(0.5)的内框边框粗细不一......但这可能是亚像素问题

补充Drkawashima的回答：

• zoom在Firefox中根本不起作用。
• • 很久以前 *（童话故事到此结束，抱歉），zoom: 1;是帮助调试IE6的强大声明。它将应用的元素赋予一个内部“开关”到这个名为hasLayout的浏览器（不是CSS属性，只是一个类似于“clearfix”的概念）。你会发现position: relative; zoom: 1;在旧项目中相当多

zoom不是标准的CSS功能。
从MDN开始：
此功能是非标准的，不在标准轨道上。请勿在面向Web的生产站点上使用它：它不会对每个用户都起作用。2实现之间也可能有很大的不兼容性，而且将来的行为可能会改变。
请改用transform: scale(0.8)。

zoom不适用于css动画或transition属性：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

zoom和scale在布局方面的工作方式完全不同。为什么scale按原样缩放元素zoom的工作方式类似于应用于特定元素的全局浏览器缩放。