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 規範草案中,也就是CSS3中的transform: scale這個屬性來實現

用法:ie下子元素浮動時候父元素不隨着自動擴大的問題,使用下面的CSS寫法

.父元素 {   overflow: auto; zoom: 1   },關於更多清楚浮動的用法,可以戳http://www.cnblogs.com/dongtianee/p/4563084.html裏面的第十問解釋的很詳細。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章