CSS樣式中屬性zoom：1的作用詳解

CSS中zoom:1的作用
相容IE6、IE7、IE8瀏覽器，常常會遇到一些問題，可以使用zoom:1來解決，有如下作用：
觸發IE瀏覽器的haslayout
解決ie下的浮動，margin重疊等一些問題。
例如，本站使用p做一行兩列顯示，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%;}

加紅色的那裡就可以在IE6、IE7、IE8正常顯示效果了。

加紅色的那裡就可以在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：1的作用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！