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的感化  兼容IE六、IE七、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的那邊就能夠在IE六、IE七、IE8正常顯示結果了。  css中的zoom的感化  一、搜檢頁面的標籤是否閉合  不要小看這條，也許折騰了你兩天都沒有解決的 CSS BUG 題目，卻僅僅源於這裏。畢竟成果頁面的模板通常都是由開闢來嵌套的，而他們很輕易犯此類題目。  快捷提示：能夠用 Dreamweaver 打開文件搜檢，通常沒有閉合的標籤，會黃色靠山高亮。  　　二、樣式打消法  有些錯雜的頁面也許加載了 N 個外鏈 CSS 文件，那麼逐個刪除 CSS 文件，找到 BUG 觸發的具體 CSS 文件，縮小鎖定的侷限。  　　對於剛纔鎖定的題目 CSS 樣式文件，逐行刪除具體的樣式定義，定位到具體的觸發樣式定義，甚至是具體的觸發樣式屬性。  　　三、模塊確認法  有時辰咱們也能夠從頁面的 HTML 元素出發。刪除頁面中不合的 HTML 模塊，尋找到觸發題目的 HTML 模塊。  　　四、搜檢是否清除浮動  其實有很多的 CSS BUG 題目是由於沒有清除浮動形成的。養成傑出的清除浮動的習慣是需要的，推薦應用 無額外 HTML 標籤的清除浮動的辦法（儘可能避免應用 overflow:hidden;zoom:1 的相似辦法來清除浮動，會有太多的限制性）。  　　五、搜檢 IE 下是否觸發 haslayout  不少的 IE 下錯雜 CSS BUG 都與 IE 特有的 haslayout 互相干注。熟悉和懂得 haslayout 對於處理懲罰錯雜的 CSS BUG 會事半功倍。推薦瀏覽 old9 翻譯的 《On having layout》（如果沒法翻越穿越巨大的 GFW，可瀏覽 藍色上的轉帖 ）  快捷提示：如果觸發了 haslayout，IE 的調試對象 IE Developer Toolbar 中的屬性中將會顯示 haslayout 值爲 -1。  　　六、邊框靠山調試法  故名思議就是給元素設置顯眼的邊框或者靠山（通常黑色或紅色），進行調試。此辦法是最經常使用的調試 CSS BUG 的辦法之一，對於錯雜 BUG 依舊實用。經濟實惠還環保^^  最後想誇大一點的是，養成傑出的書寫習慣，削減額外標籤，儘可能語義，合適標準，其實可認爲咱們削減不少額外的錯雜 CSS BUG，更多的時辰實際上是咱們自己給自己建造了麻煩。慾望你闊別 BUG ，生活生計愈來愈美好。   具體出處參考：http://www.jb51.net/css/40285.html