设为首页 - 加入收藏 - 网站地图 - RSS订阅 村姑网-www.cunguer.com
当前位置:首页 > 网页制作 > CSS > 正文

巧用CSS中的zoom:1解决ie下的浮动、margin重叠等问题

时间:2015-12-05 18:40:45 来源:村姑网 作者:喜欢安静 阅读:
导读:在制作网页的过程中经常会遇到兼容IE6、IE7、IE8浏览器的问题,而有时候我们可以巧妙的使用css中的zoom属性设置其值为1(zoom:1)来解决。 zoom:1的作用有一下2点: 1、触发IE浏览器的haslayout 2、解决ie下的浮动,margin重叠等一些问题。 下面我们来举例说明...

    在制作网页的过程中经常会遇到兼容IE6、IE7、IE8浏览器的问题,而有时候我们可以巧妙的使用css中的zoom属性设置其值为1(zoom:1)来解决。

zoom:1的作用有一下2点:
1、触发IE浏览器的haslayout
2、解决ie下的浮动,margin重叠等一些问题。

下面我们来举例说明一下,下面是使用DIV做的一行两列显示的HTML代码
<div class="redian">
<h2>热点文章</h2>
<ul class="liebiao">
<li><a href="/css/155.html" target="_blank">css中zoom属性你了解吗</a></li>
<li><a href="/css/165.html" target="_blank">zoom的使用方法</a></li>
</ul>
</div>

CSS文件中的代码:
.redian h2 {
height:36px;
font-size:14px;
line-height:25px;
color:#456;
border-bottom:2px
solid #565;
}

.redian {
margin-bottom:8px;
border:2px;
padding:5px 10px;
overflow:hidden}

.redian h2 span { float:right; font-weight:normal;}
.redian ul { padding:10px 1px;}
.liebiao { overflow:auto; zoom:1;} /*第一次先去掉此行试一下*/
.redian li {
height:36px;
width:270px;
float:left;
overflow:hidden;}

在css代码中的红色部分第一次先去掉试一下,分别在一下在IE6、IE7、IE8的显示效果,然后在加上设置了zoom:1的那一行,再看一下显示效果,你会发现加上之后,解决了这3个版本的浏览器的兼容问题。