电脑软硬件应用网
当前位置: 电脑软硬件应用网 > 设计学院 > 网络编程 > CSS教程 > 正文
讲解CSS中zoom:1的作用
讲解CSS中zoom:1的作用
2010-3-19 9:14:05  文/dodo   出处:学IT网   
兼容IE6、IE7、IE8浏览器,经常会遇到一些问题,可以使用zoom:1来解决,有如下作用:

触发IE浏览器的haslayout
解决ie下的浮动,margin重叠等一些问题。

比如,本站使用DIV做一行两列显示,HTML代码:

<div class="h_mainbox">
 <h2>推荐文章</h2>
 <ul class="mainlist">
 <li><a href="/html/2009-12-18/21-1907360304171.html" style="color:#0000FF" target="_blank">原创:ASP.NET使用log4Net日志组件教程(每天产生一个日志及日志按大小切割)</a></li>
 <li><a href="/html/2009-11-12/21-932220455859.html" style="color:#0000FF" target="_blank">原创:.NET版分布式缓存Memcached测试实例(Memcached缓存读取添加与清空等)</a></li>
 </ul>
</div>

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%;}

加红色的那里就可以在IE6、IE7、IE8正常显示效果了。

  • 上一篇文章:

  • 下一篇文章:
  • 最新热点 最新推荐 相关文章
    CSS伪类选择器nth-child()
    css3教程:background属性调整增强
    css教程:CSS3 Media Queries 详解
    CSS 类名的长命名和短命名
    CSS实例教程:非浮动区域设置宽度
    如何使用css约束一个层不可见?
    CSS的list-style解释
    小议使用“完整”的CSS的缺点
    CSS中的相对定位与绝对定位详解
    实例使用DIV+CSS制作圆角边框加阴影…
    关于45IT | About 45IT | 联系方式 | 版权声明 | 网站导航 |

    Copyright © 2003-2011 45IT. All Rights Reserved 浙ICP备09049068号