zoom:1的原理及用法

面试常问的一个问题zoom：1的作用，很多人都知道是清楚浮动,触发IE的haslayout属性

但是你知道zoom:1的工作原理和来龙去脉吗？

zoom:1确实帮我们解决了不少ie下的bug，但是它的原理，又有多少人知道呢？

所以下面来说一下它的来龙去脉

【简介】

zoom属性是IE浏览器的专有属性（亲测后新版chrome和Opera也支持），它可以设置或检索对象的缩放比例，也就是作用在于缩放元素，目前为止，wekbit系列、ie系列（ie6~ie11）均支持。

设置zoom:1可以在IE6下清除浮动、解决margin导致的重叠等问题

【适用场景】

经常用来解决一些ie特有的bug，但是写css时在什么地方要写它呢？

当IE遇到问题的时候，尤其是IE67，zoom: 1可以激活BFC，然后激活BFC后就可以解决好多问题

通常，当浮动子元素导致父元素塌陷的时候，只要给父元素加上overflow: hidden;来解决，但是对于IE67不行，需要触发其hasLayout（有布局）属性才可以

zoom:1就是IE6 专用的触发 haslayout 属性的。在IE中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。当一个元素的hasLayout属性值为true时，它负责对自己和可能的子孙元素进行尺寸计算和定位。

另外hasLayout对于内联元素也可以有效果，当内联元素的hasLayout为true的时候，可以给这个内联元素设定高度和宽度并得到期望的效果。

通常，在给低版本的IE做兼容的时候会用到zoom:1。例如，清除浮动的时候，我们会这么写

.clearfix::after{
                   content: ".";clear: both;display: block;
                   visibility: hidden;overflow: hidden;height: 0;*zoom:1
}

为了防止低版本的IE浏览器不支持after选择器或者某些属性，在最后加上zoom:1来清除浮动

【拓展】具体关于hasLayout的知识点，我在后面文章里做了总结

总结：

①zoom属是IE浏览器的专有属性（这句话不太正确，因为新版主流浏览器也开始兼容zoom属性），但是记住火狐和老版本的webkit核心的浏览器任不支持这个属性。

②zoom现在已经被逐步标准化，出现在 CSS 3.0 规范草案中，并且通过css3里面的动画属性scale进行缩放。但zoom与scale两种css缩放存在差异，我在后面文章http://570109268.iteye.com/admin/blogs/2410148里做了总结

zoom:1的原理及用法

猜你喜欢