CSS ZOOM 作用[IE6下清除浮动]
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" onload='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后才会清除浮动。
转载一篇也是说明这个问题的文章：http://51ui.blog.163.com/blog/static/61900372200828114494/
使用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';}" onmouseover="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';}" onclick="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';}" onmouseover="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';}" onclick="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属性，这是个什么属性呢？下面的文章有详细介绍：
http://sinab365.blog.sohu.com/107239414.html 中文版
http://www.satzansatz.de/cssd/onhavinglayout.html#wherefrom 英文原版
