"缩放"在CSS中有什么作用？

Question

我发现一些jQuery插件,在他们的css规则中使用'zoom'描述符,我甚至查看w3c网站,发现它用于放大但我怎么能实际实现呢？或者我必须定义一些视口？我该如何定义这样的视口？或者我错了整个东西？

有可能像它一样使用它

a {
    zoom:1;
}

a:hover {
   zoom:2;
}

Answer 1

缩放不包含在CSS规范中,但它在IE,Safari 4,Chrome中得到支持(-moz-transform: scale(x)从3.5开始,你可以在Firefox中获得类似的效果).看到这里.

所以,所有的浏览器

 zoom: 2;
 zoom: 200%;

将您的对象缩放2,所以这就像加倍大小.这意味着如果你有

a:hover {
   zoom: 2;
}

悬停时,<a>标签将缩放200%.

就像我说的,在FireFox 3.5+使用中-moz-transform: scale(x),它做了很多相同的事情.

编辑:在回复评论时thirtydot,我会说这scale()不是一个完整的替代品.它不像那样扩展zoom,而是扩展开箱即用,而不是强制其他内容.在这里看到这个.此外,zoomOpera 似乎不支持.

这篇文章提供了一个有用的见解scale,可以解决使用jQuery解决它的不兼容问题和解决方法的方法.

`zoom`和`transform:scale()`有显着差异.变换原点很容易修复,但`transform`不影响内容流和`zoom`的事实并不容易解决.此外,Opera似乎不支持`zoom`.你应该真的编辑你的答案,这在当下是误导. (16认同)
@thirtydot - 修改了我的答案.谢谢. (3认同)

Answer 2

令人惊讶的是,没有人提到这zoom: 1;对IE6-7有用,通过触发hasLayout来解决大多数IE-only错误.