美文网首页JS相关让前端飞
ZOOM:1的原理和作用

ZOOM:1的原理和作用

作者: 暗恋桃花源丫 | 来源:发表于2017-08-27 11:29 被阅读56次

转载声明:此文章为转载,点击查看原文

如有侵权24小时内删除。联系QQ:1522025433


         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 规范草案中,也就是CSS3中的transform:

scale这个属性来实现

用法:ie下子元素浮动时候父元素不随着自动扩大的问题,使用下面的CSS写法

.父元素 {   overflow: auto; zoom: 1   },关于更多清楚浮动的用法,可以戳http://www.cnblogs.com/dongtianee/p/4563084.html,里面的第十问解释的很详细。

相关文章

  • ZOOM:1的原理和作用

    转载声明:此文章为转载,点击查看原文。 如有侵权24小时内删除。联系QQ:1522025433 zoom:...

  • zoom:1的作用

    兼容IE6、IE7、IE8浏览器:触发IE浏览器的haslayout(如果触发了 haslayout,IE 的调试...

  • 清楚浮动的几种方法,各自的优缺点

    1、 父级div定义伪类:after和zoom 原理:IE8以上和非IE浏览器才支持:after,原理和方法...

  • CSS清除浮动方法大全

    1、父级div定义伪类:after和zoom 原理:IE8以上和非IE浏览器才支持:after,原理和方法2有点类...

  • css几种常用的清除浮动方法

    1、父级div定义伪类:after和zoom 原理:IE8以上和非IE浏览器才支持:after,原理和方法2有点类...

  • 几种常用的清除浮动方法

    1、父级div定义伪类:after和zoom 原理:IE8以上和非IE浏览器才支持:after,原理和方法2有点类...

  • 清除浮动的8种方式

    1.为父级元素设置伪类:after和zoom 原理:原理和方法2有点类似,但由于只有IE8以上和非IE浏览器才支持...

  • zomm:1 是什么意思

    zomm:1 是什么意思 _zoom是CSS hack中专对IE6起作用的部分。IE6浏览器会执行zoom:1表示...

  • zoom 的常见作用

    zoom是IE专用属性,firefox等是不支持的。它的本来作用是设置或检索对象的缩放比例,但这作用几乎用不到。 ...

  • 8月第四周

    8.24 zoom:1 的作用 http://blog.csdn.net/u010313768/article/d...

网友评论

    本文标题:ZOOM:1的原理和作用

    本文链接:https://www.haomeiwen.com/subject/wuubdxtx.html