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

补充：

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

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

html中zoom方法,CSS中zoom属性或overflow:auto的使用方法
这次给大家带来CSS中zoom属性或overflow:auto的使用方法,使用CSS中zoom属性或overflow:auto的注意事项有哪些,下面就是实战案例,一起来看一下. 前言其实在CSS中的 ...
css 中的zoom,对CSS中zoom属性的总结
在css中,zoom属性作用是设置或检索对象的缩放比例.对应的脚本特性为zoom.虽然很多人都知道,但是任然有人不知道zoom的具体的用法,或者没有深究过,下面就把zoom的用法总结一下: 1.CSS ...
火狐浏览器打不开淘宝首页的解决办法
火狐浏览器打不开淘宝首页的解决办法今天想打开淘宝看看双11有没有什么好东西可以买买买,但是火狐跳出来意思是淘宝网站有问题无法访问,要去咨询网站管理员,囧~~~ 然后上网搜了一圈,说只要按下Ctrl+ ...
CSS中zoom属性的作用
这里介绍一下CSS中的Zoom属性,这个属性一般不为人知,甚至有些CSS手册中都查询不到.但经常会在一些css样式中看到它出现. Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持.它可 ...
火狐浏览器怎么打开oracle,firefox火狐浏览器点击没响应，该怎么解决？
shockwave flash 所使用的flash 组件在打开很多多媒体窗口的时候很容易失去响应,如果firefox的使用者在这时有很要紧的事情在处理,而浏览器没反应又不能强制关闭,可以这样做喔 ...
中文代码谷歌_Chrome谷歌浏览器下不支持css字体小于12px的解决办法
先来看下 ie.火狐.谷歌浏览器下各个字体显示情况ie下: 火狐下: 谷歌下: 从上面的图可以很明显看出谷歌下 css设置字体大小为12px及以下时,显示都是一样大小,都是默认12px; 那么网上一直 ...
HTML字体小于12谷歌不兼容,Chrome谷歌浏览器下不支持css字体小于12px的解决办法...
coder.png 在这一年的工作中,我发现很多问题你利用自己的「聪明才智」绕过去了,总有一天它会和你不期而遇,今天我们就来直面一个字体兼容性的小问题:Chrome谷歌浏览器下不支持css字体小于12 ...
HTML字体小于12谷歌不兼容,Chrome谷歌浏览器下不支持css字体小于12px的解决办法【原创】...
先来看下 ie.火狐.谷歌浏览器下各个字体显示情况 ie下: 火狐下: 谷歌下: 从上面的图可以很明显看出谷歌下 css设置字体大小为12px及以下时,显示都是一样大小,都是默认12px; 那么网上一 ...
关于hibernate不支持sqlserver中nchar映射的解决办法
需要返回nchar类型的数据时,则会报错`org.hibernate.MappingException: No Dialect mapping for JDBC type: -15`此时我们可以使用` ...

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

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

最新文章

热门文章