论坛首页 Web前端技术论坛

zoom小议

浏览 5936 次
锁定老帖子 主题:zoom小议
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2009-08-07   最后修改:2009-08-07
CSS
在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是不停顿,但是移动图片很卡


网名:   天堂左我往右
   发表时间:2009-08-25  
谢谢天堂左我往右,每篇文章都需经过不同浏览器的测试才得以结论。
0 请登录后投票
   发表时间:2009-09-03  
测试的过程是郁闷而复杂而糊涂,呵呵
0 请登录后投票
   发表时间:2009-09-29  
谁说ie8不支持?自己写代码测测看
0 请登录后投票
   发表时间:2009-10-08  
ie8是支持的...抱歉,以前貌似用ietest测试的不支持...想不起来了...
感谢haisheng胸
0 请登录后投票
   发表时间:2009-11-24  
haisheng 写道
谁说ie8不支持?自己写代码测测看



我想起来了,ie8是支持zoom的,但是和IE67有不同,ie67整个坐标系都随着zoom变化了,但是IE8坐标系并没有变化
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics