css中zoom和transform:scale的区别
关于zoom：
以前只是看到别人的代码中用过zoom，自己从未使用过，今天在探究ie7兼容inline-block时，发现里面提到了zoom。下面开始进行对zoom的探究。
zoom：normal | <number> | <percentage>
默认值：normal
适用于：所有元素
继承性：有
动画性：是
计算值：绝对长度
取值：
normal：
使用对象的实际尺寸。（等同于zoom:1）
<number>：
用浮点数来定义缩放比例。不允许负值
<percentage>：
用百分比来定义缩放比例。不允许负值
兼容性：
zoom的字面意思是“变焦”，摄影的时候常用到的一个概念。对于web上的zoom效果，你也可以按照此概念理解。可以改变页面上元素的尺寸，属于真实尺寸。在以前，zoom可以给IE6/IE7浏览器增加haslayout, 用来清除浮动，修复一些布局上的疑难杂症等。
关于transform:scale
transform:scale是css3变形中的缩放
语法为：transform: scale(<x> [<y>]). 同时有scaleX, scaleY专门的x, y方向的控制。（这里不专门介绍transform:scale）
和zoom不同，scale并不支持百分比值和normal关键字，只能是数值。而且，还能是负数，没错，负数。而zoom不能是负值！
那么，二者之间还有什么不同呢？
下面我们通过具体例子来比较：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
body{
font-weight: bold; font-size: 12px;
}
p{
background-color: aqua;
}
.zoom-half { zoom: 0.5; }
.scale-half { transform: scale(0.5); }
</style>
</head>
<body>
<p>图片zoom: 0.5;</p>
<p><img src="3.jpg" class="zoom-half"></p>
<p>图片transform: scale(0.5);</p>
<p><img src="3.jpg" class="scale-half"></p>
<p>容器(含图文)zoom: 0.5;</p>
<p class="zoom-half">foodoir<br><img src="3.jpg"></p>
<p>容器(含图文)transform: scale(0.5);</p>
<p class="scale-half">foodoir<br><img src="3.jpg"></p>
</body>
</html>
为了使结果更加更加清晰，在这里给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;
}
暂时就学这么多关于它们之间的区别，以后发现问题还是会继续更新……