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. 精彩回顾 HUAWEI HiAI 亮相华为北研所

    ​​从普通照片变成艺术品,仅需3秒: 从随手拍下的讲解胶片到生成规整清晰的ppt,只要瞬间…… 5月25日在华为北京研究所举办的HUAWEI HiAI技术合作交流会上,伴随着一声声惊叹,数款接入HUA ...

  2. 新手学习JSP+Servlet笔记一

    作为一个新手,初次接触jsp,servlet,习惯了后台的开发,前台的知识一窍不通,利用闲暇时间,给自己补补,从MyEclipse开始. 安装好MyEclipse之后,没有安装程序的可以下载 http ...

  3. 数据挖掘、目标检测中的cnn和cn---卷积网络和卷积神经网络

    content 概述 文字识别系统LeNet-5 简化的LeNet-5系统 卷积神经网络的实现问题 深度神经网路已经在语音识别,图像识别等领域取得前所未有的成功.本人在多年之前也曾接触过神经网络.本系 ...

  4. ASP.NET MVC 4 技术讲解

    ASP.NET MVC 相关的社群与讨论区 Routing 与 ASP.NET MVC 生命周期 Model相关技术 Controller相关技术 View数据呈现相关技术 Area区域相关技术 AS ...

  5. A charge WIFI point base on airbase-ng+dhcp+lamp+wiwiz

    Make wifi as a hot point Make a script echo $0 $1 case $1 in "start") sleep 1 ifconfig wla ...

  6. 【BZOJ1115】[POI2009]石子游戏Kam 阶梯博弈

    [BZOJ1115][POI2009]石子游戏Kam Description 有N堆石子,除了第一堆外,每堆石子个数都不少于前一堆的石子个数.两人轮流操作每次操作可以从一堆石子中移走任意多石子,但是要 ...

  7. springcloud微服务实战--笔记--1、基础知识

    微服务的问题: 分布式事务和数据一致性. 由于分布式事务本身第实现难度就非常大,所以在微服务架构中,我们更强调在各服务之间进行无事务第调用,而对于数据一致性,只要求数据在最后第处理状态是一致第即可:若 ...

  8. c++ get the pointer from the reference

    int x = 5; int& y = x; int* xp = &x; int* yp = &y; xp is equal to yp. 也就是说,直接对reference取 ...

  9. Linux系统中的python2.x升级至python3

    python2.x升级至python3 由于需要在公司测试环境搭建的Jenkins上面运行接口自动化脚本,所以需要对Jenkins所处的服务器的python环境进行升级,以便运行python3编写的脚 ...

  10. Oracle数据库基础--存储过程和函数

    一.存储过程和函数 存储过程: 对一个模块的封装 函数: 功能与存储过程几乎一样 区别: 函数必须通过return 关键字返回一个值 存储过程: 不需要return返回值 参数: 输入型参数 输出型参 ...