zoom的用法

  • zoom在非IE浏览器中的作用
    zoom在非IE浏览器中表现为支持放大或者缩小,但是由于这个属性是一个不标准的css属性,因此一般在非IE浏览器中不用zoom来实现div 的缩放效果,现在要放大或者缩小直接用css3的transform属性。火狐浏览器不支持zoom属性。 webkit内核浏览器中支持。
    效果图:zoom.html
    这和transform:scale效果类似,但有一些区别,详情可参考:Zoom和transform:scale的区别
  • zoom在IE浏览器中的作用
    通常,当浮动子元素导致父元素塌陷的时候,只要给父元素加上overflow: hidden;来解决,但是对于IE不行,需要触发其hasLayout属性才可以。zoom:1就是IE6 专用的,用来触发 haslayout 属性,从而清除浮动、解决margin导致的重叠等问题。
    效果图:zoom-ie.html
    更多zoom用法可参考:浅谈 css的zoom属性

hasLayout

hasLayout可以简单看作是IE5.5/6中的BFC(Block Formatting Context)。也就是一个元素要么自己对自身内容进行组织和尺寸计算(即可通过width/height来设置自身的宽高),要么由其containing block来组织和尺寸计算。而IFC(即没有拥有布局)而言,则是元素无法对自身内容进行组织和尺寸计算,而是由自身内容来决定其尺寸(即仅能通过line-height设置内容行距,通过行距来支撑元素的高度;也无法通过width设置元素宽度,仅能由内容来决定而已)。

  • 当hasLayout为true时(就是所谓的“拥有布局”),相当于元素产生新BFC,元素自己对自身内容进行组织和尺寸计算;
  • 当hasLayout为false时(就是所谓的“不拥有布局”),相当于元素不产生新BFC,元素由其所属的containing block进行组织和尺寸计算。 hasLayout是一个只读属性,所以无法使用Javascript进行设置。hasLayout也无法通过CSS属性直接设置,而是通过某些CSS属性间接开启这一特性。不同的是某些CSS属性是以不可逆方式间接开启hasLayout为true。

过去一直听说旧版本IE下很多诡异的bug都是由hasLayout引起的。
深入了解请参考:CSS魔法堂:hasLayout原来是这样!

猜你喜欢

转载自blog.csdn.net/cuishizun/article/details/82499658