zoom小议

在IE中,我们可以使用zoom来对div进行缩放

在FF浏览器中,虽然没有zoom,但是有一个比zoom更加强大的私有属性-moz-transform(FF3.5+)和-webkit-transform(Safari 3.1+和Chrome支持)
这是一个提前实现的css3属性,不仅仅有放大功能,还有旋转,变形等等.参数可以为一个CSS变形函数列表,这些函数可以包括旋转.缩放.倾斜和位移.或者,通过定义二维Affine

变形矩阵来同时应用多个变形效果
例子如下:

旋转和倾斜:-moz-transform: rotate(-15deg) skew(-15deg, -15deg);

mozilla原文如下:https://developer.mozilla.org/en/CSS/-moz-transform#CSS_transform_functions

可以看到支持的浏览器如下:
IE5.5+(通过滤镜实现)
SF3.1+  chrome1+
OP一直没有实现...


另俺测试的结果,safari4+,chrome都支持zoom属性了...仅仅是放缩的话可以用zoom了,zoom和transform相比,俺感觉zoom性能更好一些,(来自不严格测试的结果)
safari4+的zoom缩小时字体最小为9px,IE会缩放到尽可能的小
IE6,7下,子元素为absolute时,父元素必须为relative或者absolute,否则子元素不生效
safari和chrome没有这个问题
另外safari和chrome设置zoom的元素(当前元素和子元素)所有坐标都跟随zoom变化了,比如left,但是IE设置zoom的元素left等属性并不受影响,只有子元素被影响

IE8已经不支持zoom这个属性了...遗憾



其它附录:ie和ff的一个不同点,如果有请求,然后有dom操作,貌似ff是同时进行的,而IE是把请求全部提交之后再进行dom的...
写个示例就比较明显,比如先发送50个请求,然后移动50张图片,可以看出IE是停顿一下,然后图片会很流畅的移动,而ff是不停顿,但是移动图片很卡


网名:   天堂左我往右

评论

5 楼 lixinlixin2008 2009-11-24  

haisheng 写道

谁说ie8不支持?自己写代码测测看

我想起来了,ie8是支持zoom的,但是和IE67有不同,ie67整个坐标系都随着zoom变化了,但是IE8坐标系并没有变化

4 楼 lixinlixin2008 2009-10-08  

ie8是支持的...抱歉,以前貌似用ietest测试的不支持...想不起来了...
感谢haisheng胸

3 楼 haisheng 2009-09-29  

谁说ie8不支持?自己写代码测测看

2 楼 lixinlixin2008 2009-09-03  

测试的过程是郁闷而复杂而糊涂,呵呵

1 楼 zhouyrt 2009-08-25  

谢谢天堂左我往右，每篇文章都需经过不同浏览器的测试才得以结论。