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原來是這樣!