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就纯粹进行比例控制，不受限。