ZOOM是IE的一个专有属性，其原本的作用被很少提及到，但经常会在一些css样式中看到它出现，这让我对它有些兴趣了。今天解决一个兼容性问题，用Zoom解决的。
.maindiv{border:solid 1px #ccc;margin:3px auto; width:624px;height:400px;}
.h_title{padding:0;margin:0; _line-height:1;background-color:#C8E1FB;}.s_title{font-size:14px; font-weight:700; padding:5px 10px 3px 10px;display:block;color:#fff;}.ul-province{_line-height:1; overflow:hidden;margin:0;padding:3px;list-style-type:none;font-size:12px; border:solid 1px #ccc; display:block;zoom:1;}.div_body{padding:0px 5px 5px 5px;margin-top:3px;}.ul-province li{ float:left;padding:0; _width:10px; display:block; padding-right:15px; white-space:nowrap; word-break:keep-all;}.ul-unis{_line-height:1;margin:5px 0; overflow-x:hidden; overflow-y:auto; padding:10px; padding-right:0; height:200px;font-size:12px;border:solid 1px #ccc;}.ul-unis li{padding:4px 5px;float:left; width:66px;}.ul-unis li a,.ul-province li a { display:block; text-align:center; height:18px; line-height:18px; color:#005EAC;cursor:pointer;}.ul-unis li.active a,.ul-province li.active a { background:#C8E1FB none repeat scroll 0 0; color:#FFFFFF !important; dispaly:block;}.div-sex{border:solid 1px #ccc; margin-bottom:3px; padding-left:5px;}#province_unis_select a:link,#province_unis_select a:visited{ color:#005EAC;text-decoration:none}#province_unis_select .spWidth{/*width:100px;*/}#province_unis_select a:hover{color:#005EAC;text-decoration:underline}<body class="main" id="province_unis_select" οnlοad='init()'>
<form id="form1" runat="server"> <div class="maindiv"> <h2 class="h_title"><span class="s_title">选择所在地区参考值</span></h2> <div class="div_body"> <div id="div-sex" class="div-sex"> 性别:男<input id="sexrdo1" name="sexrdo" type="radio" checked="checked" />女<input id="sexrdo2" name="sexrdo" type="radio" /> </div> <ul id="ul_province" class="ul-province"> <li><a href="javascript:void(0);">湖北</a></li> <li><a>湖北</a></li> </ul> <ul id="ul_unis" class="ul-unis"> <li><a>武汉</a></li> <li><a>湖北</a></li> </ul> </div> </div> </form></body><script type="text/javascript">
//页面载入构建省份结构数据 name：名称，code：代码，unis：市，unis.name 市名，unis.val 指标名称//var data_provinces=[{name:"湖北",code:"1",unis:[{Name:"市1",Val:"1"},{Name:"市2",Val:"2"},{Name:"市3",Val:"3"}]},{name:"湖南",code:"2",unis:[{Name:"",Val:""}]},{name:"广电",code:"3",unis:[{Name:"",Val:""}]}];var data_provinces = [{"Code":"030101","Name":"上海"},{"Code":"030102","Name":"山东省"},{"Code":"030103","Name":"江苏省"},{"Code":"030104","Name":"安徽省"},{"Code":"030105","Name":"浙江省"},{"Code":"030106","Name":"江西省"},{"Code":"030107","Name":"福建省"},{"Code":"030201","Name":"重庆"},{"Code":"030202","Name":"四川省"},{"Code":"030203","Name":"贵州省"},{"Code":"030204","Name":"云南省"},{"Code":"030205","Name":"西藏自治区"},{"Code":"030301","Name":"北京"},{"Code":"030302","Name":"天津"},{"Code":"030303","Name":"内蒙古自治区"},{"Code":"030304","Name":"河北省"},{"Code":"030305","Name":"山西省"},{"Code":"030401","Name":"河南省"},{"Code":"030402","Name":"湖北省"},{"Code":"030403","Name":"湖南省"},{"Code":"030404","Name":"广西壮族自治区"},{"Code":"030405","Name":"广东省"},{"Code":"030406","Name":"海南省"},{"Code":"030407","Name":"台湾省"},{"Code":"030408","Name":"香港特别行政区"},{"Code":"030409","Name":"澳门特别行政区"},{"Code":"030501","Name":"陕西省"},{"Code":"030502","Name":"甘肃省"},{"Code":"030503","Name":"宁夏回族自治区"},{"Code":"030504","Name":"青海省"},{"Code":"030505","Name":"新疆维吾尔自治区"},{"Code":"030601","Name":"黑龙江省"},{"Code":"030602","Name":"辽宁省"},{"Code":"030603","Name":"吉林省"}];function init(){
if(data_provinces&&data_provinces.length>0){ for(var i=0;i<data_provinces.length;i++){ var li=document.createElement("li"); var a=document.createElement("a"); li.appendChild(a); $("ul_province").appendChild(li); a.innerHTML=data_provinces[i].Name; a.Code=data_provinces[i].Code; a.Unis=data_provinces[i].Unis; a.href="javascript:void(0);"; if(data_provinces[i].Name.length>2)li.className="spWidth"; } }}function $(id){return document.getElementById(id);}
</script>
上面的HTML，如果在IE6下显示会存在清除浮动的问题，在IE7，8下由于ul有overflow:hidden的设置，会清除浮动，IE6下在加上了zoom：1后才会清除浮动。
转载一篇也是说明这个问题的文章：
使用zoom、overflow解决IE6、IE7、火狐浏览器下嵌套容器清除浮动问题
我们经常遇到一个容器外面套一个边框，边框高度随容器高度变化，但是当边框内容器设置了浮动属性后，外框就不跟随变化，这时就需要清除浮动。给外边框容器加上overflow:auto的属性，可以解决IE7和火狐浏览器下的清除浮动问题，但是IE6下不生效，我们需要使用IE的一个私有属性zoom使IE5.5 的浏览器达到外框跟随变化的效果。 需要注意的几个细节问题，例如我们建立一个样式为text的容器，宽200象素，高度自适应，外面包一个样式为content的10象素的外框。（如图1）图1
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" οnmοuseοver="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" οnclick="if(!this.resized) {return true;} else {window.open(this.src);}" onmousewheel="return imgzoom(this);" alt="Click here to open new window CTRL+Mouse wheel to zoom in/out" border="0" width="896"> 代码如下：以下是引用片段：<style type="text/css"> .content{ border:10px solid #F00;} .text{ width:200px; height:300px; background:#000;} </style> <body bgcolor="#火狐浏览器火狐浏览器火狐浏览器"> <div class="content"> <div class="text"></div> </div> </body> 如果我们为text容器设置了左浮动的属性，并将content容器定义了200象素的宽，就需要为content容器增加overflow:auto属性，以清除text容器的浮动。否则火狐浏览器下则会出现问题。（如图2）图2
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" οnmοuseοver="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" οnclick="if(!this.resized) {return true;} else {window.open(this.src);}" onmousewheel="return imgzoom(this);" alt="" border="0"> 代码如下：以下是引用片段：<style type="text/css"> .content{ border:10px solid #F00; width:200px; overflow:auto;} .text{ width:200px; height:300px; background:#000; float:left;} </style> <body bgcolor="#火狐浏览器火狐浏览器火狐浏览器"> <div class="content"> <div class="text"></div> </div> </body> 除此之外还有一种比较特殊的情况，如果在不设定content宽度的情况下，仅仅使用overflow:auto，在IE5.5 下是无法实现清除浮动的效果的。为此我们需要使用一个IE的私有属性zoom来使IE下达到所需效果。 代码如下：以下是引用片段：<style type="text/css"> .content{ border:10px solid #F00; overflow:auto; zoom:1;} .text{ width:200px; height:300px; background:#000; float:left;} </style> <body bgcolor="#火狐浏览器火狐浏览器火狐浏览器"> <div class="content"> <div class="text"></div> </div> </body> -----------------------------------------------
经常会看到说ZOOM会触发haslayout属性，这是个什么属性呢？下面的文章有详细介绍：
中文版
英文原版