兼容IE6、IE7、IE8浏览器,经常会遇到一些问题,可以使用zoom:1来解决,有如下作用:
触发IE浏览器的haslayout
解决ie下的浮动,margin重叠等一些问题。
比如,本站使用DIV做一行两列显示,HTML代码:

<div class="h_mainbox">
<h2>推荐文章</h2>
<ul class="mainlist">
<li><a href="#" style="color:#0000FF" target="_blank">CSS库吧</a></li>
<li><a href="#" style="color:#0000FF" target="_blank">原创< /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:;}
.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中的zoom的作用
1、检查页面的标签是否闭合
不要小看这条,也许折腾了你两天都没有解决的 CSS BUG 问题,却仅仅源于这里。毕竟页面的模板一般都是由开发来嵌套的,而他们很容易犯此类问题。
快捷提示:可以用 Dreamweaver 打开文件检查,一般没有闭合的标签,会黄色背景高亮。

  2、样式排除法
有些复杂的页面也许加载了 N 个外链 CSS 文件,那么逐个删除 CSS 文件,找到 BUG 触发的具体 CSS 文件,缩小锁定的范围。

  对于刚才锁定的问题 CSS 样式文件,逐行删除具体的样式定义,定位到具体的触发样式定义,甚至是具体的触发样式属性。

  3、模块确认法
有时候我们也可以从页面的 HTML 元素出发。删除页面中不同的 HTML 模块,寻找到触发问题的 HTML 模块。

  4、检查是否清除浮动
其实有不少的 CSS BUG 问题是因为没有清除浮动造成的。养成良好的清除浮动的习惯是必要的,推荐使用 无额外 HTML 标签的清除浮动的方法(尽量避免使用 overflow:hidden;zoom:1 的类似方法来清除浮动,会有太多的限制性)。

  5、检查 IE 下是否触发 haslayout
很多的 IE 下复杂 CSS BUG 都与 IE 特有的 haslayout 息息相关。熟悉和理解 haslayout 对于处理复杂的 CSS BUG 会事半功倍。推荐阅读 old9 翻译的 《On having layout》(如果无法翻越穿越伟大的 GFW,可阅读 蓝色上的转帖 )
快捷提示:如果触发了 haslayout,IE 的调试工具 IE Developer Toolbar 中的属性中将会显示 haslayout 值为 -1。

  6、边框背景调试法
故名思议就是给元素设置显眼的边框或者背景(一般黑色或红色),进行调试。此方法是最常用的调试 CSS BUG 的方法之一,对于复杂 BUG 依旧适用。经济实惠还环保^^
最后想强调一点的是,养成良好的书写习惯,减少额外标签,尽量语义,符合标准,其实可以为我们减少很多额外的复杂 CSS BUG,更多的时候其实是我们自己给自己制造了麻烦。希望你远离 BUG ,生活越来越美好。

CSS中zoom:1的作用的更多相关文章

  1. CSS中zoom:1的作用 ,小标签大作用

    CSS中zoom:1的作用兼容IE6.IE7.IE8浏览器,经常会遇到一些问题,可以使用zoom:1来解决,有如下作用:触发IE浏览器的haslayout解决ie下的浮动,margin重叠等一些问题. ...

  2. (转载)CSS中zoom:1的作用

    CSS中zoom:1的作用兼容IE6.IE7.IE8浏览器,经常会遇到一些问题,可以使用zoom:1来解决,有如下作用:触发IE浏览器的haslayout解决ie下的浮动,margin重叠等一些问题. ...

  3. css中zoom:1以及z-index的作用

    一.CSS中zoom:1的作用在做IE6.IE7.IE8浏览器兼容的时候,经常会遇到一些问题,可以使用zoom:1来解决,有如下作用:1.触发IE浏览器的haslayout2.解决IE下的浮动,mar ...

  4. css中zoom和transform:scale的区别

    css中zoom和transform:scale的区别 关于zoom: 以前只是看到别人的代码中用过zoom,自己从未使用过,今天在探究ie7兼容inline-block时,发现里面提到了zoom.下 ...

  5. CSS中 Zoom属性

    CSS中 Zoom属性 其实Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支撑.它可以设置或检索对象的缩放比例.除此之外,它还有其他一些小感化,比如触发ie的hasLayout属性,清除 ...

  6. css中“zoom:1”是什么意思

    继承性: 无 兼容性: IE 基本语法 zoom : normal | number 语法取值 normal : 默认值.使用对象的实际尺寸 number : 百分数 | 无符号浮点实数.浮点实数 ...

  7. css 中 zoom和transform:scale的区别(转载)

    一.IE和Chrome等浏览器与zoom 还在几年前,zoom还只是IE浏览器自己私有的玩具,但是,现在,除了FireFox浏览器,其他,尤其Chrome和移动端浏览器已经很好支持zoom属性了: z ...

  8. CSS中清除浮动的作用以及如何清除浮动

    1.什么是浮动,浮动的作用 “浮动”从字面上来理解就是“悬浮移动.非固定”的意思.块级元素(div.table.span…)是以垂直方向排列,而在前端界面中往往要使用水平布局块级元素使界面更美观.这就 ...

  9. CSS中zoom和scale的区别

    zoom和scale这两个东西都是用于对元素的缩放,但两者除了兼容性之外还有一些不同的地方.zoom缩放会将元素保持在左上角,而scale默认是中间位置,可以通过transform-origin来设置 ...

随机推荐

  1. zoj 1010 Area【线段相交问题】

    链接: http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=1010 http://acm.hust.edu.cn/vjudge/ ...

  2. BZOJ 1011 [HNOI2008]遥远的行星

    1011: [HNOI2008]遥远的行星 Time Limit: 10 Sec  Memory Limit: 162 MBSec  Special JudgeSubmit: 2559  Solved ...

  3. -_-#URL区分大小写吗

    Should url be case sensitive?

  4. Visual Studio创建跨平台移动应用_01.Cordova&Xamarin

          目前开发移动应用有三种模式:Native.Hybird.Web,若要开发跨平台的移动应用,又希望与本地API交互,那么Hybird是一个非常好的选择.       作为一个.Net程序员, ...

  5. HDU_1254——推箱子,两次BFS

    这题做的一把鼻涕一把泪,果断考虑不周555 Problem Description 推箱子是一个很经典的游戏.今天我们来玩一个简单版本.在一个M*N的房间里有一个箱子和一个搬运工,搬运工的工作就是把箱 ...

  6. 终极shell zsh

    在mac上安装zsh,推荐安装. 参见http://macshuo.com/?p=676. 安装成功提示,看着很帅的样子

  7. Android Studio 2.1.x 关联SDK API Source

    问题: 看图=>,当在android studio里ctrl+鼠标左键查看例如: TextUtils.isEmpty(content);这段代码的isEmpty方法的实现的时候经常就跑到如图所示 ...

  8. HDU1257:最少拦截系统(LIS)

    Problem Description 某国为了防御敌国的导弹袭击,发展出一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:虽然它的第一发炮弹能够到达任意的高度,但是以后每一发炮弹都不能超过前一发的高 ...

  9. Guice学习(一)

    Guice学习(一) Guice是Google开发的一个轻量级依赖注入框架(IOC).Guice非常小而且快,功能类似与Spring,但效率上网上文档显示是它的100倍,而且还提供对Servlet,A ...

  10. 用java具体代码实现分数(即有理数)四则运算

    用java具体代码实现分数(即有理数)四则运算 1,背景 Java老师布置了一个关于有理数运算的题目,因为参考书上有基本代码,所以自己主要是对书上代码做了一点优化,使其用户交互性更加友好以及代码封装性 ...