CSS缩放：zoom（解决Firefox、Opera的兼容问题）

今天要实现两个长得一样的功能模块，只是大小不一样，不想重新再写一遍css了，想到有个zoom，就偷懒了。

IE浏览器和新版Chrome都支持css的zoom属性，这个属性用于缩放节点，取值0到1，例：

 

• zoom: 0.5;

 

但是Firefox和Opera不支持该属性，可以通过下面两个CSS3的属性实现：

 

• -moz-transform，-moz-transform-origin //Firefox
• -o-transform，-o-transform-origin //Opera
• -webkit-transform，-webkit-transform-origin //Chrome & Safari

 

-moz-transform可用于缩放节点，它还有其他功能，暂不讨论，用于缩放的写法如下：

 

-moz-transform:scale(0.5);

 

但是它会缩放到中间，而IE会缩放到左上角，再通过-moz-transform-origin:top left;就可以实现和IE一样的效果了。

 

Chrome虽然支持zoom，但是在缩放的时候背景图片的位置（background-position）有偏移误差，于是索性用以上方法对Chrome重新设置了一下。这里用到了《css hack》
转自：http://kictpov.blog.163.com/blog/static/176217048201272802726402/