说一下zoom:1的原理，万一被问到呢？

2017-04-19 08:38 tlnshuju 阅读(607) 评论(0) 编辑收藏举报

某一天。前同事低着头从鹅厂面试回来。他说他被一道非经常见的问题难倒了。

对方问他知道zoom：1的作用吗？

前同事：清楚浮动啊,触发haslayout。

再问：那你知道zoom:1的工作原理和来龙去脉吗？

前同事：......

zoom:1确实帮我们攻克了不少ie下的bug，可是它的来龙去脉，又有多少人知道呢？

所以我老生常谈，说一下它的来龙去脉。

Zoom属性是IE浏览器的专有属性。它能够设置或检索对象的缩放比例。先来一张来自度娘的截图

在寻常的css编写过程中。zoom:1可以比較奇妙地解决ie下比較奇葩的bug。

譬如外边距（margin）的重叠，譬如浮动的清除。譬如触发ie的haslayout属性等等。

来龙去脉大概例如以下：

度娘告诉我们：zoom是设置或检索对象的缩放比例。设置或更改一个已被呈递的对象的此属性值将导致围绕对象的内容又一次流动。

尽管此属性不可继承。可是它会影响对象的全部子对象( children )。这样的影响非常像 background 和 filter 属性导致的变化。

此属性对于 currentStyle 对象而言是仅仅读的，对于其它对象而言是可读写的。

当设置了zoom的值之后，所设置的元素就会就会扩大或者缩小。高度宽度就会又一次计算了，这里一旦改变zoom值时事实上也会发生又一次渲染，运用这个原理，也就攻克了ie下子元素浮动时候父元素不随着自己主动扩大的问题。

Zoom属是IE浏览器的专有属性，火狐和老版本号的webkit核心的浏览器都不支持这个属性。然而，zoom如今已经被逐步标准化，出如今 CSS 3.0 规范草案中。

眼下非ie因为不支持这个属性，它们又是通过什么属性来实现元素的缩放呢？

我们能够通过css3里面的动画属性scale进行缩放。

好了。粗劣地说了一下zoom的来龙去脉，如有不对的地方。望多多不吝赐教。假设认为有收获，请多多留言。

Author: Alone
Antroduction: 高级前端开发project师
Sign: 人生没有失败，仅仅有没到的成功。

博主相关文章推荐：

移动端上下滑动事件之--坑爹的touch.js

刷新页面返回顶部