关于"zoom“ 的一点小认识

最早接触zoom是在清除浮动的时候，原因就是zoom能触发IE的haslayout，当时也没深究其原理，今天，在查看张鑫旭的对overflow与zoom”清除浮动”的一些认识时，其中提到zoom是比例缩放，比较诧异，遂去查找资料（可惜，中文全介绍它是IE私有属性，用于清除浮动，人云亦云，造成就这一个简陋的版本可查询），发现其中大有乾坤，记下测试过程，其中有错误的，望大家指正，也希望大家去研究下这个东西，不能总是说它就能清除个浮动，是IE私有的……

一.zoom原本是IE的私有属性，但谷歌，opera,safari也是支持它的（火狐到现在的版本也不支持它），只不过其中有一些差异，容我后面道来

（截图来自：http://www.browsersupport.net/CSS/zoom）

二.zoom在各浏览器不同的差异表现

　1. zoom就是缩放属性，没有继承，它是非标准的，它是不被推荐的（在W3CHTML上，它被写成css3 zoom属性，但我去w3c官网上没找到，不知道是我找错了地方还是别人，望有人找到知会我一下，不胜感谢）其语法如下：

zoom: normal | <number> | <percentage>

2.支持的浏览器对于zoom有两种不同的表现，一种是以chrome opera safari为主的现在标准浏览器（以下称标准浏览器），另一种是IE为主的浏览器(以下称ie)

注：（block与inline-block类的元素 统称为block类，inline类的元素统称为inline类,测试代码全在jsfiddle.net   测试代码地址：上，有兴趣的可以看看，我只截图敲结果）

a: 一个block类元素，给它加一个样式，zoom: 2

IE中不会去缩放当前block类元素（本身）的margin,定位中的top,left值,padding，其余的都会缩放，比如width,height,font-size,line-height等

标准浏览器中则会缩放margin,定位中的top,left,但也不会缩放padding，这个值，

截图如下：  

标准浏览器与ie对block类元素内部的所有元素属性都会进行缩放，（不包括padding）

b.针对内联元素，标准浏览器zoom有效，但IE8及以上的IE浏览器不支持这个属性，其余表现和它们各自阵营的表现一样，

如果想要IE8以上的内联元素也支持zoom,可以把内联元素转换成block类元素，或者，给它加个属性position: absolute，加不加top，left都一样，

c.  标准浏览器中的zoom加一个值  reset,相当于在一个有zoom的元素中不进行缩放

表述不清，望大家都自己做下实验。。。。，关于它的应用及与transforms的区别，有待进一步研究

资料引用：zoom介绍（FQ吧，骚年！！)

资料引用：zoom的浏览器支持