说一下zoom:1的原理，万一被问到呢？

标签： zoom 原理 | 发表时间：2014-09-29 09:14 | 作者：minidrupal
出处：http://blog.csdn.net

某一天，前同事低着头从鹅厂面试回来。他说他被一道很常见的问题难倒了。

对方问他知道zoom：1的作用吗？

前同事：清楚浮动啊,触发haslayout。

再问：那你知道zoom:1的工作原理和来龙去脉吗？

前同事：......


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的来龙去脉，如有不正确的地方，望多多指教。如果觉得有收获，请多多留言。




Author: Alone
Antroduction: 高级前端开发工程师
Sign: 人生没有失败，只有没到的成功。


博主相关文章推荐：

移动端上下滑动事件之--坑爹的touch.js


轻轻谈一下seaJs——模块化开发的利器


有趣的前端题目，看了不后悔

移动端前端开发概述

浅谈 标签的语义化

浅谈鼠标滚轮事件

不积跬步无以至千里----高度自适应的textarea

sass和less，优秀的前端样式预处理器

视差滚动的那些事儿





作者：minidrupal 发表于2014-9-29 1:14:44 原文链接
阅读：251 评论：1 查看评论

相关 [zoom 原理] 推荐：

说一下zoom:1的原理，万一被问到呢？

- - CSDN博客Web前端推荐文章
某一天，前同事低着头从鹅厂面试回来. 他说他被一道很常见的问题难倒了. 对方问他知道zoom：1的作用吗. 前同事：清楚浮动啊,触发haslayout. 再问：那你知道zoom:1的工作原理和来龙去脉吗. zoom:1确实帮我们解决了不少ie下的bug，但是它的来龙去脉，又有多少人知道呢. 所以我老生常谈，说一下它的来龙去脉.

Thumbnail Hover Zoom 各大瀏覽器上最好的網路相簿縮圖放大鏡

- helloyj - 電腦玩物
當我們在上網瀏覽時，有時候會看到很多「縮圖」，這時候必須點擊進入該圖片的專屬網頁後才能看到原始的高解析大圖片，這樣的動作多做幾次應該就會開始覺得麻煩了吧. 所以各大瀏覽器上，都有開發一些「縮圖放大鏡」擴充套件，只要滑鼠懸停在這些小圖上，就會自動彈出大圖，不用換頁便能更輕鬆瀏覽各大網路相簿. 今天要介紹在Google Chrome、Opera、Firefox上的這類「縮圖放大鏡」，我盡我所能的去比較和找出這些瀏覽器上「最好」的套件，但或許有遺珠，或是有更好的選擇，這部份就留待朋友們幫忙回饋補充了.

HandlerSocket的原理

- Roger - MySQLOPS 数据库与运维自动化技术分享
HandlerSocket的应用场景：. MySQL自身的局限性，很多站点都采用了MySQL+Memcached的经典架构，甚至一些网站放弃MySQL而采用NoSQL产品，比如Redis/MongoDB等. 不可否认，在做一些简单查询（尤其是PK查询）的时候，很多NoSQL产品比MySQL要快很多，而且前台网站上的80%以上查询都是简洁的查询业务.

hbase原理

- - CSDN博客云计算推荐文章
1.hbase利用hdfs作为其文件存储系统，利用mapreduce来处理数据，利用zookeeper作为协调工具. 2.行键（row key），类似于主键，但row key是表自带的. 3.列族（column family） ,列（也称作标签/修饰符）的集合，定义表的时候指定的，列是在插入记录的时候动态增加的.

zookeeper原理

- - CSDN博客云计算推荐文章
1.为了解决分布式事务性一致的问题. 2.文件系统也是一个树形的文件系统，但比linux系统简单，不区分文件和文件夹，所有的文件统一称为znode. 3.znode的作用：存放数据，但上限是1M ;存放ACL(access control list)访问控制列表，每个znode被创建的时候，都会带有一个ACL，身份验证方式有三种：digest(用户名密码验证)，host(主机名验证)，ip(ip验证) ，ACL到底有哪些权限呢.

索引原理

- - ITeye博客
索引是存储引擎用于快速找到记录的一种数据结构. 也就会说索引也是一种数据结构，也占用磁盘空间. 索引是对查询优化最有效的手段，可以将查询提升几个数量级，相当牛掰啊. 1）索引大大减少了服务器需要扫描的数据量. 2）索引可以帮助服务器避免排序和临时表. 3）索引可以将随机IO变为顺序IO. 数据库索引可以想象成一本书的目录，如果想在一本书中找到某个主题，那么先到书的目录中找到这个主题，然后根据目录提供的页码，找到要找的主题.

Hessian原理

- - 互联网 - ITeye博客
Hessian 原理分析. 一．      远程通讯协议的基本原理. 二．      应用级协议 Binary-RPC. Binary-RPC 是一种和 RMI 类似的远程调用的协议，它和 RMI 的不同之处在于它以标准的二进制格式来定义请求的信息 ( 请求的对象、方法、参数等 ) ，这样的好处是什么呢，就是在跨语言通讯的时候也可以使用.

MapReduce原理

- - C++博客-牵着老婆满街逛
       MapReduce 是由Google公司的Jeffrey Dean 和 Sanjay Ghemawat 开发的一个针对大规模群组中的海量数据处理的分布式编程模型. MapReduce实现了两个功能. Map把一个函数应用于集合中的所有成员，然后返回一个基于这个处理的结果集. 而Reduce是把从两个或更多个Map中，通过多个线程，进程或者独立系统并行执行处理的结果集进行分类和归纳.

LTPA Cookie原理

- - Web前端 - ITeye博客
Lightweight Third-Party Authentication (LTPA)是IBM Websphere和Domino产品中使用单点登录技术. 当服务器配置好LTPA认证方式，用户通过浏览器成功登录后，服务器会自动发送一个session cookie给浏览器；此cookie中包含一个LTPA Token.

HTML5设计原理

- jessie - 蓝色理想
Jeremy Keith在 Fronteers 2010 上的主题演讲 下载PPT（PDF） 观看视频 今天我想跟大家谈一谈HTML5的设计. 主要分两个方面：一方面，当然了，就是HTML5. 我可以站在这儿只讲HTML5，但我并不打算这样做，因为如果你想了解HTML5的话，你可以Google，可以看书，甚至可以看规范.