zoom屬性詳解-css教學-PHP中文網

首頁

web前端

css教學

zoom屬性詳解

藏色散人

Mar 01, 2021 pm 02:16 PM

zoom屬性是ie專有屬性，除了設定或檢索物件的縮放比例之外，它還有可以觸發ie的haslayout屬性、清除浮動、清除margin重疊等作用。

zoom屬性詳解

本文操作環境：Windows7系統，CSS3版本，Dell G3電腦。

css的zoom屬性

zoom這個屬性是ie專有屬性，除了設定或檢索物件的縮放比例之外，它還有可以觸發ie的haslayout屬性，清除浮動，清除margin重疊等作用。不過值得注意的一點就是火狐瀏覽器不支援zoom屬性，但是在webkit核心瀏覽器中zoom這個屬性也是可以支援的。

（1）下面我們來看下zoom在非IE瀏覽器中的作用：看下面的例子，我是在谷歌瀏覽器下訪問的，在該例子中zoom的作用是放大為原來的2倍（讀者可以自己嘗試縮小操作）

1.zoom:1 時

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8" />  
<style>  
    div{  
        width: 100px;  
        height: 100px;  
        border: 3px solid red;   
        zoom: 1;  
}  
</style>  
    </head>  
    <body>  
        <div>hello</div>  
    </body>  
<html>

以上程式碼的結果如圖：

zoom屬性詳解

【推薦學習：CSS影片教學】

2.zoom：2 即放大為原來的2倍：

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8" />  
<style>  
    div{  
        width: 100px;  
        height: 100px;  
        border: 3px solid red;   
        zoom: 2;  
}  
</style>  
    </head>  
    <body>  
        <div>hello</div>  
    </body>  
<html>

結果截圖如下：

zoom屬性詳解

注意：zoom在非IE瀏覽器中表現為支援放大或縮小，但是由於這個屬性是一個不標準的css屬性，因此一般在非IE瀏覽器中不用zoom來實作div 的縮放效果，現在要放大或縮小直接用css3的transform屬性。

（2）看完了zoom在非IE瀏覽器中的表現之後，我們就該看看這個屬性在IE瀏覽器中的作用了。

Zoom的使用方法：

zoom : normal | number

normal :　預設值。使用物件的實際尺寸

number :　百分數 | 無符號浮點實數。浮點實數值為1.0或百分數為100%時相當於此屬性的 normal 值用白話講解就是zoom:後面的數字即放大的倍數，可以是數值，也可以是百分比。如：zoom:1，zoom:120%。而這個屬性只要在IE中才起作用，所以很少用到它的實際用途，而最常用到作用是清除浮動等，如：

.border{ 
border:1px solid #CCC; 
padding:2px; 
overflow:hidden; 
_zoom:1; 
}

_zoom是CSS hack中專對IE6起作用的部分。 IE6瀏覽器會執行zoom:1表示物件的縮放比例，但這裡

overflow:hidden;和_zoom:1;是連起來用的，作用是清除border內部浮動。

同理，也可以用相同方法清除margin屬性在IE瀏覽器中的重疊問題：這就要提到zoom屬性在IE中的第二個作用了，也就是

#相容於IE6、IE7、IE8瀏覽器，常會遇到一些問題，可以使用zoom:1來解決，有以下作用：

(2)觸發IE瀏覽器的haslayout ,解決ie下的浮動， margin重疊等一些問題。

例如，本站使用DIV做一行兩列顯示，HTML程式碼：

<div class="h_mainbox">   
<h2 id="推荐文章">推荐文章</h2>   
<ul class="mainlist">   
<li><a href="#" style="color:#0000FF" target="_blank">CSS库吧</a></li>   
<li><a href="#" style="color:#0000FF" target="_blank">原创< /a></li>   
</ul>   
</div>

CSS程式碼：

.h_mainbox { border:1px solid #dadada; padding:4px 15px; background:url(../mainbox_bg.gif) 0 1px repeat-x; margin-bottom:6px; overflow:hidden}   
.h_mainbox h2 { font-size:12px; height:30px; line-height:30px; border-bottom:1px solid #ccc; color:#555;}   
.h_mainbox h2 span { float:right; font-weight:normal;}   
.h_mainbox ul { padding:6px 0px; background:#fff;}   
.mainlist { overflow:auto; zoom:1;}   
.h_mainbox li { width:268px; float:left; height:24px; overflow:hidden; background:url(../icon3.gif) 0 6px no-repeat; padding:0px 5px 0px 18px; line-height:200%;}

.mainlist裡面的zoom:1的那裡就可以在IE6、IE7、IE8正常顯示效果了。

(3)以下是zoom屬性在IE瀏覽器中常見作用總結，希望對以後在使用這個屬性時有所幫助：

1、檢查頁面的標籤是否閉合

不要小看這條，也許折騰了你兩天都沒解決的CSS BUG 問題，卻只源自於這裡。畢竟頁面的模板一般都是由開發來嵌套的，而他們很容易犯這類問題。

快速提示：可用 Dreamweaver 開啟檔案檢查，一般沒有閉合的標籤，會黃色背景亮。

　　2、樣式排除法

有些複雜的頁面也許載入了 N 個外鏈 CSS 文件，那麼逐個刪除 CSS 文件，找到 BUG 觸發的特定 CSS 文件，縮小鎖定的範圍。

　　對於剛才鎖定的問題 CSS 樣式文件，逐行刪除特定的樣式定義，定位到特定的觸發樣式定義，甚至是特定的觸發樣式屬性。

　　3、模組確認法

有時候我們也可以從頁面的 HTML 元素出發。刪除頁面中不同的 HTML 模組，尋找到觸發問題的 HTML 模組。

　　4、檢查是否清除浮動

其實有不少的 CSS BUG 問題是因為沒有清除浮動造成的。養成良好的清除浮動的習慣是必要的，建議使用無額外 HTML 標籤的清除浮動的方法（盡量避免使用 overflow:hidden;zoom:1 的類似方法來清除浮動，會有太多的限制性）。