zoom 是个困惑了好久的元素,今天对它有了个初步的认识

  zoom , ie 的专属属性,在其他浏览器中不起作用,它的原本功能是设置或检测对象的缩放比例(只在ie下起作用)
比如  
<div style="background:#f0f3f9; padding:20px; zoom:2;">
<img data-src="http://XXXXX.jpg" border="0" />
</div>

在ie中它会使图片放大两倍显示。

在我们日常见到这个玩意的时候他一般用于浮动的清除,老的说法是可以触发ie的haslayout 来清除浮动

在 非ie 和 ie7及其以上版本的浏览器中,可以使用 overflow :hidden 等方法来进行清除浮动
可是在ie6 及其以下的浏览器中并不能正确的理解 overflow 这个属性,这是早期ie的一个bug
所以我们就可以用以下方式来清除浮动:
<div style="zoom:1; background:#f0f3f9; padding:20px;">
<img style="float:left;" data-src="http://XXXXX.jpg" />
</div>

在ie6 及其以下的浏览器中,div 便有了高度, 此时再给它加上 其他浏览器和ie8+的清除浮动的方法 就可以完美结局  :)

zoom在清除浮动中的利用的更多相关文章

  1. .clearfix:after(清除浮动)中各个属性及值详细解说

    清除浮动.clearfix:after一词,从事web前端的朋友们对此不会陌生吧,下面为大家介绍的是.clearfix:after中用到的所有属性及值的含义,对此感兴趣的朋友可以参考下哈想,希望对大家 ...

  2. 【转】CSS中的浮动和清除浮动

    以下转自<CSS中的浮动和清除浮动,梳理一下!> 浮动到底是什么? 浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素.请默念3次! 浮动最初设计的目 ...

  3. CSS(一)解析浮动塌陷与清除浮动

    清除浮动方法 1.对父级设置适合CSS高度,父级元素撑开并且包含子元素. <p>固定高度</p> <div style="height: 50px;" ...

  4. css 浮动布局,清除浮动

    浮动的特性: (1)浮动元素有左浮动(float:left)和右浮动(float:right)两种 (2)浮动的元素会向左或向右浮动,碰到父元素边界.其他元素才停下来 (3)相邻浮动的块元素可以并在一 ...

  5. css浮动产生和清除浮动的几种方式

    浮动的语法:float:left/right; 浮动float的原本设计了作用初衷是为了实现文字环绕效果 浮动产生负作用: 1.背景不能显示 2.边框不能撑开父元素 3.margin padding设 ...

  6. CSS中清除浮动的两种方式

    在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: <div cl ...

  7. 浅谈css中浮动和清除浮动带来的影响

    有很多时候,我们都会用到浮动,而我们有时候对浮动只是一知半解,却不是太清楚它到底是怎么回事,不知道各位有没有和我一样的感觉,只知道用它,却不知道它到底是怎么回事,所以,在学习的过程中,就要把一个概念不 ...

  8. 详细解读css中的浮动以及清除浮动的方法

    对于前端初学者来说,css浮动部分的知识是一块比较难以理解的部分,下面我将把我学习过程中的心得分享给大家. 导读:   1.css块级元素讲解 2.css中浮动是如何产生的 3.出现浮动后,如何清除浮 ...

  9. css中的浮动与三种清除浮动的方法

    说到浮动之前,先说一下CSS中margin属性的两种特殊现象 1, 外边距的合并现象: 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top ...

随机推荐

  1. 【WPF学习笔记】之如何传递第一个登录界面的值到下一个页面显示:动画系列之(三)

    ... ... 承接系列(二) 在之前的登录后台已设置发送到主界面: 在主界面接收传递的值: using System; using System.Collections.Generic; using ...

  2. python爬虫入门篇

    优质爬虫入门源码:https://github.com/lining0806/PythonSpiderNotes Python Spider:https://www.cnblogs.com/wangy ...

  3. AOS应用基础平台-模块开发流程

    AOS平台简单介绍 AOS应用基础平台基于JavaEE技术体系,以"标准功能可复用.通用模块可配置.行业需求高速开发.异构系统无缝集成"为目标.为软件开发团队提供高效可控.随需应变 ...

  4. 多文档自己主动文摘:Multi-Document Summarization,MDS

  5. PHP数据类型转换和运算符表达式

    一:数据类型的转换 获取类型: gettype($a); 判断是否是某种类型的数据: is_类型名($a); 1.(int)$a; 2.settype($a,int); 二:运算符表达式 1.数学运算 ...

  6. String代码示例

    package lianxi; public class lianxi0112 { public static void main(String[] args) { // TODO 自动生成的方法存根 ...

  7. 【BZOJ3771】Triple 生成函数+FFT

    [BZOJ3771]Triple Description 我们讲一个悲伤的故事. 从前有一个贫穷的樵夫在河边砍柴. 这时候河里出现了一个水神,夺过了他的斧头,说: “这把斧头,是不是你的?” 樵夫一看 ...

  8. C#中的new和override(转)

    在衍生类中的方法上使用new和override关键字有何意义,可以通过一系列问题来找到答案.先看一段代码: 1 class Program 2 { 3 static void Main(string[ ...

  9. 九度OJ 1160:放苹果 (DFS)

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:998 解决:680 题目描述: 把M个同样的苹果放在N个同样的盘子里,允许有的盘子空着不放,问共有多少种不同的分法?(用K表示)5,1,1和 ...

  10. 通过主机名来获取一个ip对象

    //通过名称(ip字符串or主机名)来获取一个ip对象. InetAddress ip = InetAddress.getByName("www.baidu.com");//jav ...