zoom小议

最新推荐文章于 2025-05-29 10:11:11 发布

iteye_19781

最新推荐文章于 2025-05-29 10:11:11 发布

阅读量176

点赞数

文章标签： Chrome IE Safari CSS webkit

本文探讨了在不同浏览器中实现元素缩放和变形的方法，重点介绍了IE中的zoom属性及Firefox和Safari中的-moz-transform和-webkit-transform属性。文章对比了这些方法的性能，并讨论了它们在不同浏览器版本中的兼容性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在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是不停顿,但是移动图片很卡

网名: 天堂左我往右