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>

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 英文原版

posted @ 2012-06-29 16:08 网络虫阅读(1409) 评论(0) 编辑收藏举报

刷新页面返回顶部

网络虫

CSS ZOOM 作用[IE6下清除浮动]

公告