zoom:1确实帮我们解决了不少ie下的bug,但是它的来龙去脉,又有多少人知道呢?

所以我老生常谈,说一下它的来龙去脉。

Zoom属性是IE浏览器的专有属性, 它可以设置或检索对象的缩放比例。先来一张来自度娘的截图

在平常的css编写过程中,zoom:1能够比较神奇地解决ie下比较奇葩的bug。

譬如外边距(margin)的重叠,譬如浮动的清除,譬如触发ie的 haslayout属性等等。

来龙去脉大概如下:

度娘告诉我们:zoom是 设置或检索对象的缩放比例。设置或更改一个已被呈递的对象的此属性值将导致环绕对象的内容重新流动。

虽然此属性不可继承,但是它会影响对象的所有子对象( children )。这种影响很像 background 和 filter 属性导致的变化。

此属性对于 currentStyle 对象而言是只读的,对于其他对象而言是可读写的。

当设置了zoom的值之后,所设置的元素就会就会扩大或者缩小,高度宽度就会重新计算了,这里一旦改变zoom值时其实也会发生重新渲染,运用这个原理,也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。

Zoom属是IE浏览器的专有属性,火狐和老版本的webkit核心的浏览器都不支持这个属性。然而,zoom现在已经被逐步标准化,出现在 CSS 3.0 规范草案中。

目前非ie由于不支持这个属性,它们又是通过什么属性来实现元素的缩放呢?

我们可以通过css3里面的动画属性scale进行缩放。

好了,粗劣地说了一下zoom的来龙去脉,如有不正确的地方,望多多指教。如果觉得有收获,请多多留言。

zoom:1总结的更多相关文章

  1. Nike Zoom Winflo 2 Kvinder Sko Når jeg set elementet

    De fleste af os elskede denne Nike Pegasus 34 foruden var ved at blive begejstret for at få dine ben ...

  2. css zoom属性兼容ie,firefox,chrome

    jquery代码: $("body").css({ "zoom":"2", "transform":"scal ...

  3. Selenium通过WebDriver控制IE浏览器出错 Browser zoom level was set to 109%. It should be set to 100%

    错误信息: WebDriverException: Message: Unexpected error launching Internet Explorer. Browser zoom level ...

  4. 关于scale和zoom的区别

    其实关于scale,我之前是用他来搞一些css3的特效的放大缩小啊,玩的也挺6666,而*zoom:1之前是用来做css的hack,也就是触发IE6/7的haslayout清除浮动的.终于某天,好事的 ...

  5. [WPF系列]-Deep Zoom

        参考 Deep Zoom in Silverlight

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

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

  7. zoom在css中的作用

    zoom:1 zoom:1;属性是IE浏览器的专有属性,Firefox等其它浏览器不支持.它可以设置或检索对象的缩放比例. 兼容IE6.IE7.IE8浏览器,经常会遇到一些问题,可以使用zoom:1来 ...

  8. zoom和transform:scale的区别

    小tips: zoom和transform:scale的区别 这篇文章发布于 2015年11月3日,星期二,00:52,归类于 css相关. 阅读 7876 次, 今日 8 次 by zhangxin ...

  9. 【 D3.js 进阶系列 — 6.1 】 缩放的应用(Zoom)

    缩放(Zoom)是另一种重要的可视化操作,主要是使用鼠标的滚轮进行. 1. zoom 的定义 缩放是由 d3.behavior.zoom() 定义的. var zoom = d3.behavior.z ...

  10. d3 API zoom

    常用的看明白了,还有几个地方不太明白. zoom函数: area path circle .on("zoom", function(){ that.svg_obj.select(& ...

随机推荐

  1. USACO 6.5 章节 世界上本没有龙 屠龙的人多了也便有了

    All Latin Squares 题目大意 n x n矩阵(n=2->7) 第一行1 2 3 4 5 ..N 每行每列,1-N各出现一次,求总方案数 题解 n最大为7 显然打表 写了个先数值后 ...

  2. 【读书笔记】:MIT线性代数(5):Four fundamental subspaces

    At the beginning, the difference between rank and dimension: rank is a property for matrix, while di ...

  3. Dubbo 系列(07-4)集群容错 - 集群

    BDubbo 系列(07-4)集群容错 - 集群 [toc] Spring Cloud Alibaba 系列目录 - Dubbo 篇 1. 背景介绍 相关文档推荐: Dubbo 集群容错 - 实战 D ...

  4. Windows Server 2008 R2 官方简体中文免费企业版/标准版/数据中心版

    Windows Server 2008 R2是一款微软发布的Windows服务器操作系统,和之前发布的Windows Server 2008相比功能更为完善运行更为稳定,提升了系统管理弹性.虚拟化.网 ...

  5. 哪些文件在vue项目中很重要,哪些可以删掉

    是时候告诉你重要文件是哪些了,这是一个陆游,所以 需要路由配置 index.js 路由配置文件是index.js注意这个文件最开始就在集成路由了 然后最开始集成路由的地方可以不写后缀名字,因此注意这个 ...

  6. 41.Validate Binary Search Tree(判断是否为二叉搜索树)

    Level:   Medium 题目描述: Given a binary tree, determine if it is a valid binary search tree (BST). Assu ...

  7. IDisposable实现的方法什么时候被执行的

    一,以什么是GC所认为的垃圾? 不再被应用程序的root或者别的对象所引用的对象就是已经死亡的对象,即所谓的垃圾,需要被回收 二,在仓储设计中,我们都知道非托管资源的手动释放,但继承的IDisposa ...

  8. kubernetes(k8s)容器集群管理

    Kubernetes介绍 Kubernetes是google在2014年6月开源的一个容器集群管理系统,使用go语言开发,Kubernetes也称k8s. k8s是google内部一个叫borg的容器 ...

  9. 2019-11-7-WPF-How-to-get-plain-text-from-RichTextBox

    title author date CreateTime categories WPF How to get plain text from RichTextBox lindexi 2019-11-0 ...

  10. 2019牛客暑期多校训练营(第三场)I Median

    题意:给出n-2的中位数序列b,b[i]代表原序列中(a[i],a[i+1],a[i+2])的中位数,求a. 解法:比赛的时候没做出来,赛后看题解的.解法跟网上各位大佬一样:首先要证明其实原序列a中的 ...