关于"zoom“ 的一点小认识

时间:2021-03-12 05:47:22

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

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

关于"zoom“ 的一点小认识(截图来自: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,这个值,

截图如下:  关于"zoom“ 的一点小认识

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

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

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

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

关于"zoom“ 的一点小认识

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

资料引用:zoom介绍(FQ吧,骚年!!)

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