css中zoom属性的详细介绍-css教程-PHP中文网

首页

web前端

css教程

css中zoom属性的详细介绍

零下一度

Jul 26, 2017 am 11:27 AM

css zoom

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