CSS中 Zoom屬性

標籤：原創   黃色   外鏈   模板   語義   額外   沒有   tool   html   

CSS中 Zoom屬性

其實Zoom屬性是IE瀏覽器的專有屬性，Firefox等瀏覽器不支撐。它可以設定或檢索對象的縮放比例。除此之外，它還有其他一些小感化，比如觸發ie的hasLayout屬性，清除浮動、清除margin的重疊等。

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瀏覽器中的重疊題目。

CSS中zoom:1的感化

相容IE6、IE7、IE8瀏覽器，經常會碰到一些題目，可以應用zoom:1來解決，有如下感化：
觸發IE瀏覽器的haslayout
解決ie下的浮動，margin重疊等一些題目。
比如，本站應用DIV做一行兩列顯示，HTML代碼：

 

複製代碼代碼如下:
<div class="h_mainbox">
<h2>推薦文章</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正常顯示結果了。

css中的zoom的感化

1、搜檢頁面的標籤是否閉合
不要小看這條，也許折騰了你兩天都沒有解決的 CSS BUG 題目，卻僅僅源於這裡。畢竟成果頁面的模板一般都是由開闢來嵌套的，而他們很輕易犯此類題目。
快捷提示：可以用 Dreamweaver 開啟檔案搜檢，一般沒有閉合的標籤，會黃色靠山高亮。

　　2、樣式打消法
有些錯雜的頁面也許載入了 N 個外鏈 CSS 檔案，那麼逐個刪除 CSS 檔案，找到 BUG 觸發的具體 CSS 檔案，縮小鎖定的局限。

　　對於剛才鎖定的題目 CSS 樣式檔案，逐行刪除具體的樣式定義，定位到具體的觸發樣式定義，甚至是具體的觸發樣式屬性。

　　3、模組確認法
有時辰我們也可以從頁面的 HTML 元素出發。刪除頁面中不合的 HTML 模組，尋找到觸發題目的 HTML 模組。

　　4、搜檢是否清除浮動
其實有不少的 CSS BUG 題目是因為沒有清除浮動造成的。養成傑出的清除浮動的習慣是須要的，推薦應用 無額外 HTML 標籤的清除浮動的辦法（盡量避免應用 overflow:hidden;zoom:1 的類似辦法來清除浮動，會有太多的限制性）。

　　5、搜檢 IE 下是否觸發 haslayout
很多的 IE 下錯雜 CSS BUG 都與 IE 特有的 haslayout 互相干注。熟悉和懂得 haslayout 對於處理懲罰錯雜的 CSS BUG 會事半功倍。推薦瀏覽 old9 翻譯的 《On having layout》（若是無法翻越穿越巨大的 GFW，可瀏覽 藍色上的轉帖 ）
快捷提示：若是觸發了 haslayout，IE 的偵錯項目 IE Developer Toolbar 中的屬性中將會顯示 haslayout 值為 -1。

　　6、邊框靠山調試法
故名思議就是給元素設定顯眼的邊框或者靠山（一般黑色或紅色），進行調試。此辦法是最常用的調試 CSS BUG 的辦法之一，對於錯雜 BUG 依舊實用。經濟實惠還環保^^
最後想誇大一點的是，養成傑出的書寫習慣，削減額外標籤，盡量語義，合適標準，其實可認為我們削減很多額外的錯雜 CSS BUG，更多的時辰其實是我們本身給本身建造了麻煩。慾望你闊別 BUG ，生活生計越來越美好。

CSS中 Zoom屬性