这里介绍一下CSS中的Zoom属性,这个属性一般不为人知,甚至有些CSS手册中都查询不到。但经常会在一些css样式中看到它出现。

Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持。它可以设置或检索对象的缩放比例。除此之外,它还有其他一些小作用,比如触发ie的hasLayout属性,清除浮动、清除margin的重叠等。

zoom版本:IE5.5+专有属性 继承性:无

语法:

zoom : normal | number

参数:

normal :  使用对象的实际尺寸
number :  百分数|无符号浮点实数。浮点实数值为1.0或百分数为100%时相当于此属性的normal值

说明:

CSS中zoom:1的作用
兼容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">测试一</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: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%;}

.mainlist样式名字那里就可以在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 ,生活越来越美好。

转载于:https://www.cnblogs.com/besthcp/p/4062950.html

CSS中zoom属性的作用相关推荐

  1. css 中的zoom,对CSS中zoom属性的总结

    在css中,zoom属性作用是设置或检索对象的缩放比例.对应的脚本特性为zoom.虽然很多人都知道,但是任然有人不知道zoom的具体的用法,或者没有深究过,下面就把zoom的用法总结一下: 1.CSS ...

  2. html中zoom方法,CSS中zoom属性或overflow:auto的使用方法

    这次给大家带来CSS中zoom属性或overflow:auto的使用方法,使用CSS中zoom属性或overflow:auto的注意事项有哪些,下面就是实战案例,一起来看一下. 前言 其实在CSS中的 ...

  3. FireFox火狐浏览器不支持CSS中zoom属性的解决办法

    首先需要明确一点的是,火狐浏览器全系列不支持CSS的zoom缩放属性. 浏览器兼容查询网站:https://caniuse.com/ 所以此时只能通过transform的scale实现放缩 代码很简单 ...

  4. CSS兼容写法中zoom:1的作用

    CSS中zoom:1的作用 基本语法 zoom : normal | number 语法取值 normal : 默认值.使用对象的实际尺寸 number : 百分数 | 无符号浮点实数.浮点实数值为1 ...

  5. html中outline属性,css的outline属性的作用是什么

    css的outline属性的作用是什么 发布时间:2020-05-06 11:47:34 来源:亿速云 阅读:280 作者:小新 css的outline属性的作用是什么?相信有很多人都不太了解,今天小 ...

  6. 请问下谁知道,column-tree.css中zoom是什么意思,在下面这代码里面起什么作用?...

    请问下谁知道,column-tree.css中zoom是什么意思,在下面这代码里面起什么作用? .x-column-tree .x-tree-node { zoom:0; } .x-column-tr ...

  7. html中display有哪些属性值,css中display属性是什么及其各个值的作用和用法

    当你查看别人写的css代码的时候,经常会看到display:block.none.inline.table等,那么在css中display属性到底是什么呢,都可以取什么值,每个值又有什么样的作用,到底 ...

  8. overflow属性html5,什么是css中overflow属性

    什么是css中overflow属性 发布时间:2020-07-11 16:06:42 来源:亿速云 阅读:192 作者:Leah 本篇文章给大家分享的是有关什么是css中overflow属性,小编觉得 ...

  9. CSS中float属性详解

    首先我们了解到,CSS网页布局的原理,就是按照HTML代码中对象声明的顺序,以流布局的方式来显示它,而流布局就不得不说到float浮动技术..在HTML中的所有对象,默认分为两种:块元素(block ...

最新文章

  1. 重庆事业单位计算机职称评定,看效果 | 重庆事业单位改革 职称评定不再“终身制”...
  2. python面向对象基础
  3. BZOJ 1055 [HAOI2008]玩具取名
  4. 内嵌Tomcat的Connector对象的静态代码块
  5. 一些不错的计算机书籍
  6. 案例:演示JDBC的使用
  7. HDU5688 Problem D【字符串排序+MAP】
  8. 嵌入式linux led驱动有几种写法,嵌入式Linux字符驱动LED灯设计
  9. 你了解实时3D渲染吗?实时渲染软件和应用场景科普来了
  10. 计算机声卡电路分析,几款经典简单的声卡话筒功放电路分析
  11. et中计算机的快捷键,et文件怎么打开,教您怎么打开et文件
  12. 循环矩阵求特征值的方法
  13. AngularJs参数传递
  14. 算24(递归)--算法学习
  15. 《终身成长》读书分享(附思维导图)
  16. 激光雷达错位拼接技术
  17. ftp服务器 自动备份,FtpCopy数据定时自动备份软件(FTP定时备份)
  18. 王刚日记:在互联网第一次赚到钱
  19. 微信小程序实现动态横向步骤条的两种方式
  20. # **PS CC2019 安装破解教程**

热门文章

  1. string截取字符串
  2. 华为宣布:免费培养2000名H5开发者!
  3. 童年不止回忆,京东这波回忆杀帮你重新找回热血
  4. Linux命令之解压缩unzip
  5. 小票上为啥指甲能划出印_小票为什么用指甲划一下就会出现黑痕?
  6. 【第28期】游戏策划:996的解决方式是自我驱动
  7. 本科留级,研究生又延毕的职场新人工作总结
  8. 热度不减的计算机专业,真是就业“万金油”?毕业生晒出真实工资
  9. 小程序如何使用订阅消息(PHP代码+小程序js代码)
  10. Ubuntu新机环境配置大全