zoom和scale这两个东西都是用于对元素的缩放，但两者除了兼容性之外还有一些不同的地方。zoom缩放会将元素保持在左上角，而scale默认是中间位置，可以通过transform-origin来设置。另外他们执行的渲染顺序也不同zoom可能影响到盒子的计算。
运行<!DOCTYPE html>
<style>
div {
  width:300px;height:100px;
  border:1px solid #CCC;
  font-size:0px;
  line-height:100px;
  margin:10px;
}
span {
  display:inline-block;
  height:80px;width:200px;background:#F5F5F5;
  vertical-align:middle;
  overflow:hidden;
}
</style>
<div>
  <span style="-webkit-transform:scale(0.5);"></span>
</div>
<div>
  <span style="
    -webkit-transform-origin:top left;
    -webkit-transform:scale(0.5);
  "></span>
</div>
<div>
  <span style="zoom:0.5;"></span>
</div>
　　第一个测试中只设置了scale，于是元素以自己的中心为基点做缩放。第二个测试中不仅设置了scale，还有origin来将缩放的基点设置到左上角，因此变化结束后元素呆在了左上角。虽然容器设置了和高度一样的行高，当它并没有在容器里居中，因为scale是先布局后变换的，变换不会对布局产生影响。最后一个测试是使用zoom，虽然Firefox上不支持，但这是个很古老的特性了。它和第二个测试的区别是它先缩放，后计算布局。所以在例子中它得到了垂直居中效果。

CSS中zoom和scale的区别的更多相关文章

  1. css中zoom和transform:scale的区别

    css中zoom和transform:scale的区别 关于zoom: 以前只是看到别人的代码中用过zoom,自己从未使用过,今天在探究ie7兼容inline-block时,发现里面提到了zoom.下 ...

  2. css中zoom:1以及z-index的作用

    一.CSS中zoom:1的作用在做IE6.IE7.IE8浏览器兼容的时候,经常会遇到一些问题,可以使用zoom:1来解决,有如下作用:1.触发IE浏览器的haslayout2.解决IE下的浮动,mar ...

  3. CSS中zoom:1的作用 ，小标签大作用

    CSS中zoom:1的作用兼容IE6.IE7.IE8浏览器,经常会遇到一些问题,可以使用zoom:1来解决,有如下作用:触发IE浏览器的haslayout解决ie下的浮动,margin重叠等一些问题. ...

  4. (转载)CSS中zoom:1的作用

    CSS中zoom:1的作用兼容IE6.IE7.IE8浏览器,经常会遇到一些问题,可以使用zoom:1来解决,有如下作用:触发IE浏览器的haslayout解决ie下的浮动,margin重叠等一些问题. ...

  5. CSS中 Zoom属性

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

  6. CSS中rem、em的区别

    引用文档:http://www.divcss5.com/html/h529.shtml:http://blog.csdn.net/qq_35432904/article/details/5180422 ...

  7. css 中 zoom和transform:scale的区别(转载)

    一.IE和Chrome等浏览器与zoom 还在几年前,zoom还只是IE浏览器自己私有的玩具,但是,现在,除了FireFox浏览器,其他,尤其Chrome和移动端浏览器已经很好支持zoom属性了: z ...

  8. CSS中的class与id区别及用法

    转自http://www.divcss5.com/rumen/r3.shtml及http://www.jb51.net/css/35927.html 我们平常在用DIV CSS制作Xhtml网页页面时 ...

  9. CSS中margin和padding的区别

    在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离.在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离. 下面讲解 padding和ma ...

随机推荐

  1. VMware网络模式介绍（下篇）

    VMware网络模式介绍 VMWare提供了三种工作模式,它们是bridged(桥接模式).NAT(网络地址转换模式)和host-only(主机模式). Bridged 模式: 在桥接模式下,VMwa ...

  2. 悼念512汶川大地震遇难同胞――珍惜现在，感恩生活 分类： dp 2015-05-21 10:50 14人阅读 评论(0) 收藏

    Description 急!灾区的食物依然短缺! 为了挽救灾区同胞的生命,心系灾区同胞的你准备自己采购一些粮食支援灾区,现在假设你一共有资金n元,而市场有m种大米,每种大米都是袋装产品,其价格不等,并 ...

  3. android 拍照 onCreate() 调用两次的问题

    拍照的代码网上都有就不写了!自己找下就ok了! 1 旋转屏幕导致问题! 这种情况很好解决:在androidManifest.xml 中设置activity 添加属性   android:configC ...

  4. qq视频api代码

    <!--视频容器--> <div id="mod_player"></div>   <!--腾讯视频代码开始--> <scri ...

  5. cql

    创建keyspace :CREATE KEYSPACE keyspace1 WITH replication = {'class': 'NetworkTopologyStrategy', 'DC1': ...

  6. 理解js异步的概念

    js引擎在执行的时候是单线程的,这是大家都知道的.我们先来看一段代码: <html> <head> <meta http-equiv="Content-Type ...

  7. (原)前端知识杂烩（meta系列）

    更新于 20160831 1. meta 移动端头文件设置 (一般情况下,逐条复制放在头部就可以了) 1.1 强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏 ...

  8. sqlserver高版本到低版本迁移

    从SqlServer2014 备份bak文件,在SqlServer2012中还原时遇到版本不兼容的问题. 经过leader 指导,可尝试以下办法处理数据迁移.共分三个步骤: 一.对需要迁移数据库生成s ...

  9. iOS集成支付宝

    需要企业和支付宝签约这个是需要审核的[3天左右   以邮件形式告知你] 使用支付宝进行一个完整的支付功能,大致有以下步骤: 1>先与支付宝签约,获得商户ID(partner)和账号ID(sell ...

  10. HMM模型详解

    http://www.cnblogs.com/skyme/p/4651331.html