1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > FireFox火狐浏览器不支持CSS中zoom属性的解决办法

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

时间:2021-03-09 10:55:04

相关推荐

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

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

浏览器兼容查询网站:/

所以此时只能通过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

补充:

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。