css中zoom屬性的詳細介紹-css教學-PHP中文網

首頁

web前端

css教學

css中zoom屬性的詳細介紹

零下一度

Jul 26, 2017 am 11:27 AM

csszoom

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

一、前面的一些YY

首先，不知道您注意到沒有，標題「清除浮動」加了個引號。我最近在想，這個所謂的「清除浮動」的是否準確。人有從眾的心理，尤其在我們這個集體主義文化的社會，從眾並不是一個消極的標籤，在亞洲集體主義文化裡（例如日本），其像徵著忍耐，自我控制，以及成熟，但是，有時會延續一些不準確的觀點，還記得小學「兩個鐵球同時落地」的故事嗎。

我這裡要說一些個人的，很情感化的東西，非常歡迎反駁。我在國外的技術上也經常見到”clear float”一詞，翻譯過來就是“清除浮動”，我入行較淺，所以我只能臆想，是不是“清除浮動”確實表示了那個意思，於是就廣泛使用，越是使用廣泛越不容易發現其中的不嚴謹之處。

我最近思考「清除浮動」的一些東西，發現，「清除浮動」這個說法越想越覺得不準確。準確的說法應該是“清除浮動造成的影響”，真正的“清除浮動”是什麼呢，float:none;這才是“清除浮動”的字面意思。當然，也有可能是“清除浮動”就是個簡稱，意思就是“清除浮動造成的影響”，只是叫了順口，大家也都這麼稱呼了，大家其實都心知肚明。希望自己是想太多了。

YY結束，進入本文正題，一些思考性的內容，講講我對overflow與zoom可以清除浮動造成影響的原因的理解，都是些淺薄的認識，希望真正理解的人能夠指點糾正，大大歡迎反駁，發表您自己的觀點。

二、元素的包裹性

「包裹」這個名詞常出現在JavaScript中，尤其jQuery之類的js庫，很形象的一個字。昨天我看到這麼句很有啟發性的話：「視覺化思考能以獨特而有效的方式，讓你的心有更大的空間來解決問題。」啟發性在於，這裡的「視覺化思考」改為其他一些名詞，例如“情感化思考”，“形象化思考”等同樣受用。也就是在思考問題的時候融入一些很主觀的非邏輯性的思考有助於有更廣闊的空間來解決問題。

一提到「包裹」一詞，我想到了就是白血球吞噬細菌（形象化思考 – 聯想），以及溫暖及安心（情感化思考）。這因人遺傳、成長等因素有關。為什麼我要講這些看似無關主題的東西，因為下面我要將的很多東西就是自己的感覺，“我覺得它就是這個樣子的”，很多主觀的東西。

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

1.zoom:1 時

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

以上程式碼的結果如圖：

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

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

注意：zoom在非IE瀏覽器中表現為支援放大或縮小，但是由於這個屬性是一個不標準的css屬性，因此一般在非IE瀏覽器中不用zoom來實現p 的縮放效果，現在要放大或縮小直接用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重叠等一些问题。
比如，本站使用p做一行两列显示，HTML代码：

<p 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> 
</p>

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 的类似方法来清除浮动，会有太多的限制性）。

　　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，更多的时候其实是我们自己给自己制造了麻烦。