某一天，前同事低著頭從鵝廠面試回來。他說他被一道很常見的問題難倒了。

對方問他知道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: 高級前端開發工程師
Sign: 人生沒有失敗，只有沒到的成功。

博主相關文章推薦：

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

輕輕談一下seaJs——模塊化開發的利器

有趣的前端題目，看了不后悔

移動端前端開發概述

淺談 標簽的語義化

淺談鼠標滾輪事件

不積跬步無以至千里----高度自適應的textarea

sass和less，優秀的前端樣式預處理器

視差滾動的那些事兒

關于那些常見的坑爹的小bug

總結

以上是生活随笔為你收集整理的说一下zoom:1的原理，万一被问到呢？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。