Zoom属性的使用介绍(IE私有属性)

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

Zoom的使用方法:

zoom : normal | number

normal :  默认值。使用对象的实际尺寸

number :  百分数 | 无符号浮点实数。浮点实数值为1.0或百分数为100%时相当于此属性的 normal 值用白话讲解就是zoom:后面的数字即放大的倍数,可以是数值,也可以是百分比。如:zoom:1,zoom:120%。而这个属性只要在IE中才起作用,所以很少用到它的实际用途,而最经常用到作用是清除浮动等,如:

代码如下:

.border{ 
border:1px solid #CCC; 
padding:2px; 
overflow:hidden; 
_zoom:1; 
}

_zoom是CSS hack中专对IE6起作用的部分。IE6浏览器会执行zoom:1表示对象的缩放比例,但这里 
overflow:hidden;和_zoom:1;是连起来用的,作用是清除border内部浮动。

同理,还可以使用同样方法清除margin属性在IE浏览器中的重叠问题。

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">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: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里面的zoom:1的那里就可以在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 依旧适用。经济实惠还环保^^

时间: 2024-12-18 15:07:39

Zoom属性的使用介绍(IE私有属性)的相关文章

CSS中不为人知Zoom属性的使用介绍(IE私有属性)

其实Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持.它可以设置或检索对象的缩放比例.除此之外,它还有其他一些小作用,比如触发ie的hasLayout属性,清除浮动.清除margin的重叠等. Zoom的使用方法: zoom : normal | number normal : 默认值.使用对象的实际尺寸 number : 百分数 | 无符号浮点实数.浮点实数值为1.0或百分数为100%时相当于此属性的 normal 值用白话讲解就是zoom:后面的数字即放大的倍数,可以是数值,

封装 私有属性 static静态块

封装:按照信息隐藏的原则,将数据组织在一起. 特点:1.信息隐藏 2.信息集合 私有属性+get/set方法和公有属性却别: 1.私有属性不能被直接访问,只能通过公有的get方法(访问器)和set(修改器)来进行设置和取值. 这样一旦删掉get或set方法,可以将属性做成只读或只写属性.公有属性则做不到. 2.可以通过修改器在设置属性时,做数据合法性的验证,但公有属性做不到. static{}称为静态初始化块.在类加载时执行,也就是产生对象之前执行.而且只执行一次.

php 对象直接访问私有属性

<?php header("content-type:text/html;charset=UTF-8"); class Person{ //私有的成员属性,对直接访问象 private $name; private $age; private $sex; //魔术方法 __construct(), __set(), __unset(), __isset(), __unset()..... function __construct($name="name1",$

[有码有真相]python类私有属性等要点理解及测试示例代码

# encoding: utf-8 ''' 1. python约定类定义中"__"开头(至多一个"_"结尾)的属性为"相对"的私有属性 2. 私有属性在类及其子类定义中是"可见"的,在 其它范围正常访问是相对"不可见"的 3. 留下子类可以修改父类私有属性的口子方便debug测试等 4. 在类定义以外可以通过['_'+className+'私有属性名称']名称访问 5. 私有属性引入是避免类,实例等混淆和冲

css3浏览器私有属性前缀使用详解

什么是浏览器私有属性前缀 CSS3的浏览器私有属性前缀是一个浏览器生产商经常使用的一种方式.它暗示该CSS属性或规则尚未成为W3C标准的一部分. 以下是几种常用前缀 -webkit- -moz- -ms- -o- -khtml-(现在基本都没有用了,被-webkit-取代) 举例来说,一个CSS3圆角的代码是: -webkit-border-radius: 50%; -o-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius

浏览器私有属性前缀及去除方法

什么是浏览器私有属性前缀 CSS3的浏览器私有属性前缀是一个浏览器生产商经常使用的一种方式.它暗示该CSS属性或规则尚未成为W3C标准的一部分. 以下是几种常用前缀 -webkit- -moz- -ms- -o- -khtml-(现在基本都没有用了,被-webkit-取代) 举例来说,一个CSS3圆角的代码是: -webkit-border-radius: 50%; -o-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius

【python】-- 类的实例化过程、特征、共有属性和私有属性

实例化过程 1.类的定义和语法 class dog(object): #用class定义类 "dog class" #对类的说明 def __init__(self,name): #构造函数或者是构造方法,也可以叫初始化方法 self.name = name def sayhi(self): #类方法 "sayhi funcation" #对类方法的说明 print("hello,i am a dog,my name is ",self.name

第174天:面向对象——公有属性、私有属性和静态属性

一.公有属性和私有属性 1 //对象构造函数 2 //私有属性好处: 安全 就类似闭包中的函数一样 减少污染 3 function Person(name){ 4 //私有属性,只能在对象构造函数内部使用 5 var className = "用户对象"; 6 //公有属性,在对象实例化后调用 7 this.name = name; 8 //私有方法 9 var privateFunction = function(){ 10 alert(this.name); //公有属性 11 a

python的伪私有属性

伪私有属性 类Example中定义的变量__X会自动变成_Example__X, 变量前有双下划线的变量被称为伪私有属性,为什么叫伪私有属性呢?因为该属性并不是私有不可改变的,在类外依旧可以通过 _类名__变量名  来调用修改该属性,那为什么需要伪私有属性的存在呢?先举例一段代码来说明 1 class C1: 2 def meth1(self): 3 self.X=88 4 def meth2(self): 5 print(self.X) 6 7 class C2: 8 def metha(se