`

CSS缩放:zoom(解决Firefox、Opera的兼容问题)

 
阅读更多

今天要实现两个长得一样的功能模块,只是大小不一样,不想重新再写一遍css了,想到有个zoom,就偷懒了。


IE浏览器和新版Chrome都支持css的zoom属性,这个属性用于缩放节点,取值0到1,例:
 
  • zoom: 0.5;
 
但是Firefox和Opera不支持该属性,可以通过下面两个CSS3的属性实现:
 
  • -moz-transform,-moz-transform-origin //Firefox
  • -o-transform,-o-transform-origin //Opera
  • -webkit-transform,-webkit-transform-origin //Chrome & Safari
 
-moz-transform可用于缩放节点,它还有其他功能,暂不讨论,用于缩放的写法如下:
 
-moz-transform:scale(0.5);
 
但是它会缩放到中间,而IE会缩放到左上角,再通过-moz-transform-origin:top left;就可以实现和IE一样的效果了。
 
Chrome虽然支持zoom,但是在缩放的时候背景图片的位置(background-position)有偏移误差,于是索性用以上方法对Chrome重新设置了一下。这里用到了《css hack》
转自:http://kictpov.blog.163.com/blog/static/176217048201272802726402/



分享到:
评论

相关推荐

    ZOOM:ZOOM - jQuery 图片库插件

    它兼容多种主流浏览器,包括 Chrome、Firefox、Safari、Opera 和 Internet Explorer 7 及以上版本。这款插件能够提供出色的用户体验,尤其在处理大图和高分辨率图像时,用户可以享受到平滑的缩放效果和快速的加载...

    ion.zoom:图像缩放灯箱jQuery插件

    跨浏览器:Google Chrome,Mozilla Firefox,Opera,Safari,IE(8.0+) 在触摸屏设备(iPhone,iPad等)上工作。 Ion.Zoom是根据免费分发的。 依存关系 使用脚本 导入此库: jQuery的 ion.zoom.min.js 和CSS:...

    cloud_zoom图片放大展示效果

    5. **兼容性**:Cloud_Zoom对浏览器的支持广泛,包括Chrome、Firefox、Safari、Opera和Internet Explorer等多个主流浏览器。 6. **易用性**:集成Cloud_Zoom到网页中相对简单,只需要引入JavaScript库和CSS样式,并...

    js实现兼容IE、Firefox的图片缩放代码

    这种方法在IE、Firefox、Opera和Netscape等主流浏览器上经过测试,表现良好,为开发者提供了跨浏览器的图片缩放解决方案。理解并运用这种技术,可以帮助开发者创建更稳定、更兼容的Web页面,提高用户体验。

    详解CSS中zoom属性或overflow:auto属性清除浮动的作用

    `overflow:auto`在所有现代浏览器中都得到了良好的支持,包括Firefox、Chrome、Safari和Opera。 在实际的HTML代码示例中,我们看到两个类`.za`和`.zb`分别应用了`overflow:auto`和`zoom:1`。当应用于`.box`的子元素...

    CSS网页设计字体大小(em)探讨

    Firefox3有众多的改进和新功能,我最关注的功能之一是 “全页面缩放(Full page zoom)” 。这就意味着Firefox3和Opera以及IE7 都可以让用户“完全控制显示内容的大小同时自动调整页面布局和结构”,说白了就是可以...

    利用css @viewport 做设备适配

    值得注意的是,虽然`@viewport`在IE10/11、Opera、WebKit(包括Chrome和Safari)以及Mozilla Firefox(需要Vendor Prefix)中得到了支持,但目前仍需与`<meta>`标签并用,因为并非所有浏览器都完全支持`@viewport`。...

    29个常用的CSS小技巧汇总

    7. 文本溢出显示省略号:结合`overflow: hidden`和`text-overflow: ellipsis`,可以截断超出容器的文本并显示省略号,但此方法在Firefox 5.0之前版本不支持。 8. 长字符串自动换行:使用`word-wrap: break-word`...

    iipmooviewer:IIPMooViewer是用于流传输高分辨率科学图像的高级javascript HTML5图像查看器

    它与Firefox,Chrome,Internet Explorer(版本6-10),Safari和Opera以及适用于iOS和Android的基于移动触摸的浏览器兼容。 尽管设计用于IIP协议和IIPImage,但它具有多协议支持,并且还与Zoomify,Deepzoom,...

    JS滚轮事件onmousewheel使用介绍

    为了兼容不同浏览器,通常需要检测用户是否使用Firefox,然后决定使用哪个事件名称。这样的检测可以通过判断浏览器的具体版本来实现,此处的isFirefox是一个假设的判断函数,需要开发者自行实现。 在“mousewheel”...

Global site tag (gtag.js) - Google Analytics