FireFox火狐浏览器不支持CSS中zoom属性的解决办法

首先需要明确一点的是，火狐浏览器全系列不支持CSS的zoom缩放属性。

浏览器兼容查询网站：https://caniuse.com/

所以此时只能通过transform的scale实现放缩
代码很简单，两行即可：

但是不建议用这个，最好加属性前缀，往下看

transform:scale(..);
transform-origin:..; 

其中scale可以只传一个参数，也可以传两个参数表示X，Y方向。

transform-origin指定缩放后放置位置的偏移（也可以理解为缩放中心），不设置则放置中心不变往四周延展（也可以理解为以原来的中心为中心直接进行放缩）。第一个参数可以为（left，center，right），第二个参数可以为（top，center，bottom），两个参数也都可以直接赋值数值或者百分比。

为了避免属性对其他浏览器可能产生的影响，这里建议使用FireFox的属性前缀-moz-

-moz-transform:scale(..);
-moz-transform-origin:..;

其他浏览器的属性前缀则如下：

• -moz- 代表firefox浏览器私有属性
• -ms- 代表ie浏览器私有属性
• -webkit- 代表safari、chrome私有属性
• -o- 代表Opera

补充：

1. 在使用jquery.print.js实现前端DOM打印的时候，使用scale所取的数值和使用zoom所取的数值，想达到相同的打印效果的话，往往这两个值不相等的。我自己1920分辨率WIN10，Chrome和FireFox浏览器，往A4纸上去打印，几乎相同的效果Chrome是zoom:1.5，FireFox就变成了-moz-transform:scale(1.75);

标签：moz,scale,浏览器,zoom,transform,火狐,FireFox,属性
来源： https://blog.csdn.net/qq_33821395/article/details/110069437