scale与zoom的差异

最近做表单打印功能，有个放大、缩小功能。一开始ie和chrome采用的zoom来实现，firfox采用的-moz-transform实现的。以为大功告成，但测试发来了个bug，说chrome下缩小一定程度后表单变形了，如图：

字体被压成多行了而且边线也没了。但ie和firefox上都是正确，不会变形。
当时收到bug，都想骂人了这谁能搞定，程序能干预的都干预了，这个是浏览器zoom自带的功能。

但胳膊拗不过大腿，测试妹妹说要搞定就只能硬着头皮上了，折腾一番才发现chrome里面可以用scale来做缩放。zoom在chrome下感觉对元素的border-width和font-size看起来并没有效果。

二、zoom与scale的区别总结

1、兼容性的差异：zoom为非标准属性，除firefox浏览器已在其他浏览器中得到了良好支持，scale已经是标准属性除IE8-外现代浏览器均能较好的支持；

2、取值差异：zoom的合法值可以为数值、百分比以及normal而scale则只能为数值；

3、缩放中心点差异：zoom缩放中心点为左上角，而scale默认为中心点但可以通过transform-origin进行改变；

4、重绘差异：zoom的缩放改变了元素占据空间的大小会引起整个页面的重绘而scale缩放所占据的原始尺寸不变，只在当前元素进行重绘；

5、渲染计算方法可能有差异：zoom为锐化，而scale为模糊；

6、对文字的缩放规则不一致:zoom的缩放依然受限于最小12px的中文大小限制；而scale就是纯粹就图形进行比例控制，文字50%原来尺寸；

7、这点应该是与上一条相似，border为1px的时候zoom受限于浏览器最小显示1px；而scale就纯粹进行比例控制，不受限。

scale与zoom的差异相关推荐

vue 组件拖拽和缩放，支持在容器为transform:scale和zoom情况下的正常显示
自己造轮子好累, 起因是用别人的封装组件时发现在父容器缩放(transform:scale.zoom)情况下需要拖拽缩放的组件的鼠标位置有偏移,看文档看源码找不到自定义缩放比例的地方,痛苦. 实现效果 ...
组件等比例放大——scale和zoom
scale和zoom的区别 zoom的缩放是相对于左上角的:而scale默认是居中缩放,可以通过transform-origin修改基准点 zoom的缩放改变了元素占据的空间大小:而scale的缩放占 ...
zoom与scale的区别
最近做了两个项目,一个需要对字体缩小,小于默认的字体大小(12px),最后使用transform:scale(0.9),但整个元素宽高都被缩小了,感觉很不好~~~做另外一个项目要求将整体页面安一定比例 ...
【案例分析】Linux和Windows在TCP数据包上的差异+网闸兼容问题引发的TCP连接失败故障分析
1.前言出于项目保密原因,本文所提及的IP地址并非真实IP地址,其余技术细节均与案例实际环境相同,供学习交流参考. 2.案例背景我们前段时间接到项目现场工程师电话,对方称他们新上架了一台Linux ...
Mencoder MPlayer 参数详解
MPlayer(1) 电影播放器 MPlayer(1) D>0> mplayer ...
mplayer全参数
mplayer(1) 电影播放器 MPlayer(1) D0 mplayer - 影视播放器 ...
mencoder MPlayer 参数详细
MPlayer(1) 电影播放器 MPlayer(1) D>0> mplayer ...
网页的缩放，适配以及移动的适配！
从布局出发:宽度自适应,常用百分比的方式.由于父级元素采用百分比的布局方式,随着屏幕的拉伸,它的宽度会无限的拉伸.而子元素由于采用了浮动,那么它们的位置也会固定在两端.该宽度自适应在新的时代有了新的方 ...
BIGEMAP通过离线地图二次开发接口（离线地图API）
用法示例示例 // 使用id为map的div容器初始化地图,同时指定地图的中心点和缩放级别BM.Config.HTTP_URL = ''; var map = BM.map('map','mapid ...

scale与zoom的差异

scale与zoom的差异相关推荐

最新文章

热门文章