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. android安卓开发问题集 XMPP篇

    1.消息推送查了下资料,后面还是使用了androidpn (1)java.security.KeyStoreException: KeyStore jks implementation not fou ...

  2. Centos下编译Linux内核

    Linux内核编译是一件简单却费事的事.但是独立的编译linux内核会帮助你很好的理解Linux内核的工作机理. 首先编译linux内核我们需要在当前linux操作系统下安装gcc编译器,因为我是Ce ...

  3. 虚拟机使用PuTTY、SSH Secure Shell Client前的配置

    1 仅主机模式 2 检查子网IP 为192.168.154.0 3 进入虚拟机,检查IP地址 ip addr show 添加IP地址 ip addr add dev eno16777736 192.1 ...

  4. Iphone JS时间

    var end_time = new Date(time).getTime();//月份是实际月份-1  var start_time= new Date(serverTime).getTime(); ...

  5. CF#263

    昨天没打,今天写了一下,前三题都没有难度吧. A. Appleman and Easy Task time limit per test 1 second memory limit per test ...

  6. < meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" />

    目录(?)[-] 1 meta http-equiv  X-UA-Compatible content  chrome1 1 meta http-equiv  X-UA-Compatible cont ...

  7. C#核编之System.Console类

    顾名思义,Console类封装了基于控制台的输入输出和错误流的操作,下面列举一些System.Console类常用的成员的,这些成员能为简单的命令行程序添加一些"情趣",例如改变背 ...

  8. ipa 重签

    IPA 重签名 时间 2014-03-03 10:28:36  txx's blog原文  http://blog.rpplusplus.me/blog/2014/03/03/ipa-re-codes ...

  9. 自学HTML5第一天（认识HTML5的全局属性）

    contextmenu 属性 规定 <div> 元素的上下文菜单.上下文菜单会在用户右键点击元素时出现.列子: <div contextmenu="mymenu" ...

  10. Binder的使用(跨进程——AIDL，非跨进程)

    一.Binder类 1.作用:Binder是客户端与服务器端的通信的媒介(连接各种Manager的桥梁),客户端通过Binder对象获取服务器端提供的数据 (为什么要用Binder来提供数据呢,服务器 ...