某一天，前同事低著頭從鵝廠(chǎng)面試回來(lái)。他說(shuō)他被一道很常見(jiàn)的問(wèn)題難倒了。

對(duì)方問(wèn)他知道zoom：1的作用嗎？

前同事：清楚浮動(dòng)啊,觸發(fā)haslayout。

再問(wèn)：那你知道zoom:1的工作原理和來(lái)龍去脈嗎？

前同事：......

zoom:1確實(shí)幫我們解決了不少ie下的bug，但是它的來(lái)龍去脈，又有多少人知道呢？

所以我老生常談，說(shuō)一下它的來(lái)龍去脈。

Zoom屬性是IE瀏覽器的專(zhuān)有屬性，它可以設(shè)置或檢索對(duì)象的縮放比例。先來(lái)一張來(lái)自度娘的截圖

在平常的css編寫(xiě)過(guò)程中，zoom:1能夠比較神奇地解決ie下比較奇葩的bug。

譬如外邊距（margin）的重疊，譬如浮動(dòng)的清除，譬如觸發(fā)ie的haslayout屬性等等。

來(lái)龍去脈大概如下：

度娘告訴我們：zoom是設(shè)置或檢索對(duì)象的縮放比例。設(shè)置或更改一個(gè)已被呈遞的對(duì)象的此屬性值將導(dǎo)致環(huán)繞對(duì)象的內(nèi)容重新流動(dòng)。

雖然此屬性不可繼承，但是它會(huì)影響對(duì)象的所有子對(duì)象( children )。這種影響很像 background 和 filter 屬性導(dǎo)致的變化。

此屬性對(duì)于 currentStyle 對(duì)象而言是只讀的，對(duì)于其他對(duì)象而言是可讀寫(xiě)的。

當(dāng)設(shè)置了zoom的值之后，所設(shè)置的元素就會(huì)就會(huì)擴(kuò)大或者縮小，高度寬度就會(huì)重新計(jì)算了，這里一旦改變zoom值時(shí)其實(shí)也會(huì)發(fā)生重新渲染，運(yùn)用這個(gè)原理，也就解決了ie下子元素浮動(dòng)時(shí)候父元素不隨著自動(dòng)擴(kuò)大的問(wèn)題。

Zoom屬是IE瀏覽器的專(zhuān)有屬性，火狐和老版本的webkit核心的瀏覽器都不支持這個(gè)屬性。然而，zoom現(xiàn)在已經(jīng)被逐步標(biāo)準(zhǔn)化，出現(xiàn)在 CSS 3.0 規(guī)范草案中。

目前非ie由于不支持這個(gè)屬性，它們又是通過(guò)什么屬性來(lái)實(shí)現(xiàn)元素的縮放呢？

我們可以通過(guò)css3里面的動(dòng)畫(huà)屬性scale進(jìn)行縮放。

好了，粗劣地說(shuō)了一下zoom的來(lái)龍去脈，如有不正確的地方，望多多指教。如果覺(jué)得有收獲，請(qǐng)多多留言。

Author: Alone
Antroduction: 高級(jí)前端開(kāi)發(fā)工程師
Sign: 人生沒(méi)有失敗，只有沒(méi)到的成功。

博主相關(guān)文章推薦：

移動(dòng)端上下滑動(dòng)事件之--坑爹的touch.js

輕輕談一下seaJs——模塊化開(kāi)發(fā)的利器

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

移動(dòng)端前端開(kāi)發(fā)概述

淺談 標(biāo)簽的語(yǔ)義化

淺談鼠標(biāo)滾輪事件

不積跬步無(wú)以至千里----高度自適應(yīng)的textarea

sass和less，優(yōu)秀的前端樣式預(yù)處理器

視差滾動(dòng)的那些事兒

關(guān)于那些常見(jiàn)的坑爹的小bug

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。