CSS中zoom和transform:scale的区别

原文地址：http://www.cnblogs.com/foodoir/p/5821018.html

关于zoom：

　　以前只是看到别人的代码中用过zoom，自己从未使用过，今天在探究ie7兼容inline-block时，发现里面提到了zoom。下面开始进行对zoom的探究。

　　zoom：normal | |
　　　　默认值：normal
　　　　适用于：所有元素
　　　　继承性：有
　　　　动画性：是
　　　　计算值：绝对长度
　　取值：
　　　　normal：
   　　　　　　 使用对象的实际尺寸。（等同于zoom:1）
　　　　：
  　　　　　　  用浮点数来定义缩放比例。不允许负值
　　　　：
    　　　　　　用百分比来定义缩放比例。不允许负值

　　兼容性：

　　zoom的字面意思是“变焦”，摄影的时候常用到的一个概念。对于web上的zoom效果，你也可以按照此概念理解。可以改变页面上元素的尺寸，属于真实尺寸。在以前，zoom可以给IE6/IE7浏览器增加haslayout, 用来清除浮动，修复一些布局上的疑难杂症等。

关于transform:scale

　　transform:scale是css3变形中的缩放

　　语法为：transform: scale( []). 同时有scaleX, scaleY专门的x, y方向的控制。（这里不专门介绍transform:scale）
　　和zoom不同，scale并不支持百分比值和normal关键字，只能是数值。而且，还能是负数，没错，负数。而zoom不能是负值！

那么，二者之间还有什么不同呢？

　　下面我们通过具体例子来比较：

 

        "UTF-8" >
        test
        <code class="csharp string" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;background:none !important;border:0px !important;line-height:1.8em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;color:#0000FF !important;">"text/css"</code> <code class="csharp plain" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;background:none !important;border:0px !important;line-height:1.8em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;">></code> </div> <div class="line number7 index6 alt2" style="background:rgb(244,244,244) none !important;border:0px !important;line-height:1.8em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;"> <code class="csharp spaces" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;background:none !important;border:0px !important;line-height:1.8em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;">            </code> <code class="csharp plain" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;background:none !important;border:0px !important;line-height:1.8em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;">body{</code> </div> <div class="line number8 index7 alt1" style="border:0px !important;line-height:1.8em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;"> <code class="csharp spaces" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;background:none !important;border:0px !important;line-height:1.8em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;">                </code> <code class="csharp plain" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;background:none !important;border:0px !important;line-height:1.8em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;">font-weight: bold;<br>　　　　　　　　　　　　　　　　　　 font-size: 12px;</code> </div> <div class="line number9 index8 alt2" style="background:rgb(244,244,244) none !important;border:0px !important;line-height:1.8em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;"> <code class="csharp spaces" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;background:none !important;border:0px !important;line-height:1.8em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;">            </code> <code class="csharp plain" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;background:none !important;border:0px !important;line-height:1.8em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;">}</code> </div> <div class="line number10 index9 alt1" style="border:0px !important;line-height:1.8em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;"> <code class="csharp spaces" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;background:none !important;border:0px !important;line-height:1.8em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;">            </code> <code class="csharp plain" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;background:none !important;border:0px !important;line-height:1.8em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;">p{</code> </div> <div class="line number11 index10 alt2" style="background:rgb(244,244,244) none !important;border:0px !important;line-height:1.8em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;"> <code class="csharp spaces" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;background:none !important;border:0px !important;line-height:1.8em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;">                </code> <code class="csharp plain" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;background:none !important;border:0px !important;line-height:1.8em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;">background-color: aqua;</code> </div> <div class="line number12 index11 alt1" style="border:0px !important;line-height:1.8em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;"> <code class="csharp spaces" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;background:none !important;border:0px !important;line-height:1.8em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;">            </code> <code class="csharp plain" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;background:none !important;border:0px !important;line-height:1.8em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;">}</code> </div> <div class="line number13 index12 alt2" style="background:rgb(244,244,244) none !important;border:0px !important;line-height:1.8em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;"> <code class="csharp spaces" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;background:none !important;border:0px !important;line-height:1.8em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;">            </code> <code class="csharp plain" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;background:none !important;border:0px !important;line-height:1.8em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;">.zoom-half { zoom: 0.5; }</code> </div> <div class="line number14 index13 alt1" style="border:0px !important;line-height:1.8em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;"> <code class="csharp spaces" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;background:none !important;border:0px !important;line-height:1.8em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;">            </code> <code class="csharp plain" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;background:none !important;border:0px !important;line-height:1.8em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;">.scale-half { transform: scale(0.5); }</code> </div> <div class="line number15 index14 alt2" style="background:rgb(244,244,244) none !important;border:0px !important;line-height:1.8em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;"> <code class="csharp spaces" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;background:none !important;border:0px !important;line-height:1.8em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;">        </code> <code class="csharp plain" style="font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;background:none !important;border:0px !important;line-height:1.8em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;">


        图片zoom: 0.5;
        "3.jpg"  class = "zoom-half" >
        图片transform: scale(0.5);
        "3.jpg"  class = "scale-half" >
        容器(含图文)zoom: 0.5;
        class = "zoom-half" >foodoir "3.jpg" >
        容器(含图文)transform: scale(0.5);
        class = "scale-half" >foodoir "3.jpg" >

 

　　为了使结果更加更加清晰，在这里给p标签加上了背景色，结果显示如图：

从上述例子我们可以看出如下几点差异：
    1、zoom的缩放是相对于左上角的；而scale默认是居中缩放；
    2、zoom的缩放改变了元素占据的空间大小；而scale的缩放占据的原始尺寸不变，页面布局不会发生变化；
    3、zoom和scale对元素的渲染计算方法可能有差异（需要自己动手，用高清图，仔细去看其中的区别）。
    4、对文字的缩放规则不一致。zoom缩放依然受限于最小12像素中文大小限制；而scale就是纯粹的对图形进行比例控制，文字50%原来尺寸。

后面呢，回到最之前想要解决的问题：ie7中如何兼容inline-block？

　　方法：首先将其变成行内元素，使用具有行内元素的特性，然后触发haslayout，使其具体块级元素的特性，如此就可以得到想要的效果了

　　代码：

　　　　div{
   　　　　 display:inline-block;
  　　　　  *display:inline;
  　　　　  zoom:1;
　　　　}