`
linhui_dragon
  • 浏览: 155100 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

通过css zoom缩放,兼容Firefox

    博客分类:
  • CSS
 
阅读更多
通过css zoom缩放,兼容Firefox


IE浏览器和新版chrome都支持css的zoom属性,这个属性用于缩放节点,取值0到1,例:

zoom: 0.5;


但是目前为止firefox不支持该属性,可以通过下面两个属性实现:

-moz-transform,-moz-transform-origin


-moz-transform可用于缩放节点,它还有其他功能,暂不讨论,用于缩放的写法如下:

-moz-transform:scale(0.5);


但是它会缩放到中间,而IE会缩放到左上角,再通过-moz-transform-origin:top left;就可以实现和IE一样的效果了。
分享到:
评论

相关推荐

    页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)

    1、页面缩放用到的技术...zoom的兼容性:firefox 全系列不支持。 (2)transform transform:scale(1.1,1.1); scale(x,y) 定义 2D 缩放转换。 兼容性:http://caniuse.com/#search=transform transform 属于CSS3属于,

    CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]

    在本问题中,作者提供了跨浏览器兼容的解决方案,即对Firefox和其他支持max-width属性的浏览器直接应用CSS规则,而对于IE6则使用expression来处理图片缩放。 详细说明: 根据描述和内容,作者面临的问题是如何在...

    cloud_zoom图片放大展示效果

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

    zoomImage插件

    3. **兼容性**:考虑到不同的浏览器环境,ZoomImage插件通常会确保在主流浏览器(如Chrome、Firefox、Safari、Edge和Internet Explorer)上的兼容性。 4. **轻量级**:作为一款JavaScript插件,ZoomImage通常体积...

    jQuery 调整字体大小详解 (firefox)

    在 Firefox 中,为了确保跨浏览器兼容性,我们需要关注的一个关键点是 CSS 的 `zoom` 属性。Firefox 不支持直接更改 `font-size` 来缩放元素,而是使用 `zoom` 来实现。因此,我们可以创建一个函数,通过修改元素的 ...

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

    这篇文章主要讨论了如何使用JavaScript来实现一个兼容IE和Firefox的图片缩放功能。JavaScript是一种广泛使用的客户端脚本语言,它允许我们动态地操作HTML元素,包括调整其大小。 函数`SetSize(obj, width, height)`...

    跨缩放:适用于Chrome和Firefox的跨浏览器缩放扩展

    【标题】"跨缩放:适用于Chrome和Firefox的跨浏览器缩放扩展"涉及到的主要知识点是浏览器扩展开发,尤其是针对Chrome和Firefox这两个主流浏览器的扩展。这个扩展程序旨在提供一种跨平台、跨浏览器的统一缩放体验,...

    Cloud Zoom V3.1

    5. **兼容性**:由于基于 jQuery,CloudZoom 具有良好的浏览器兼容性,能在大部分现代浏览器中正常工作,包括 Chrome、Firefox、Safari、Edge 和 Internet Explorer。 在压缩包中,我们可以看到以下几个关键文件: ...

    Cloud-Zoom 图片放大功能

    1. **兼容性**:确保该功能在各种浏览器(如Chrome、Firefox、Safari、Edge和Internet Explorer)中都能正常工作,包括移动设备的浏览器。 2. **性能优化**:处理大图和实时放大可能会消耗大量资源,因此需要优化...

    viewer.js图片缩放

    viewer.js致力于跨浏览器兼容,支持主流的现代浏览器,包括Chrome、Firefox、Safari、Edge以及IE9+。 7. **扩展应用**: - 可与其他jQuery插件结合,如lightbox、carousel等,构建更复杂的图片展示效果。 - 可...

    基于jquery的滚动鼠标放大缩小图片效果 兼容火狐.zip

    本文将详细解析如何利用jQuery实现一个滚动鼠标时图片放大缩小的效果,并且该效果兼容火狐浏览器。 首先,我们需要了解jQuery的基本用法。jQuery库通过引入`<script>`标签来加载,通常在HTML文档的`<head>`或`...

    IE浏览器专有css属性之zoom详解

    在其他非IE浏览器如Firefox、Chrome、Safari等中,`zoom` 并不是一个标准的CSS属性,因此不被支持。然而,尽管其非标准性,`zoom` 在处理特定的IE浏览器布局问题时仍然具有重要作用。 `zoom` 的基本用法是将一个...

    jquery 鼠标滚轮实现图片缩放

    由于`mousewheel`事件在Firefox中不受支持,我们可以使用`wheel`事件来替代,该事件在所有现代浏览器中都得到了良好的支持。代码如下: ```javascript $(document).ready(function() { $('#zoom-image').on('wheel...

    纯CSS3实现的鼠标滑过特效动画库Hover.css.zip

    由于Hover.css完全基于CSS3,所以它在现代浏览器中表现良好,包括Chrome、Firefox、Safari、Edge以及最新版本的Internet Explorer。然而,对于较旧或者不支持CSS3特性的浏览器,可能无法呈现所有效果。 6. **...

    openlayers : ol.js、ol.css 下载

    OpenLayers 支持现代浏览器,包括Chrome、Firefox、Safari、Edge等,同时也对旧版IE有一定的兼容性。通过使用模块化构建系统(如Webpack或Rollup),开发者可以按需引入库的部分功能,降低加载体积。 7. **社区...

    html-css-zoom

    同时,为了兼容其他浏览器,我们还需要加上无前缀的版本和Firefox的`-moz-`前缀,以及其他可能需要的前缀。 在实际项目中,我们还可能遇到响应式设计的需求。这时,我们可以使用媒体查询(`media queries`)来根据...

    jquery图片放大插件ZoomIt

    4. **兼容性**:作为基于jQuery的插件,`ZoomIt.js`兼容大部分现代浏览器,包括Chrome、Firefox、Safari、Edge以及旧版的IE浏览器。 5. **易于集成**:只需引入jQuery库和ZoomIt插件的JavaScript与CSS文件,通过...

    用JS实现和google地图类似的图片查看器-----放大、缩小、移动和还原,都控制在div里,兼容ie,FF

    在本文中,我们将深入探讨如何使用JavaScript(JS)来创建一个类似于Google地图的图片查看器。...通过这些技术的结合,我们可以构建出一个功能强大且用户体验良好的图片查看器,同时兼容IE和Firefox浏览器。

    CSS中不为人知Zoom属性的使用介绍(IE私有属性)

    其实Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持。它可以设置或检索对象的缩放比例。除此之外,它还有其他一些小作用,比如触发ie的hasLayout属性,清除浮动、清除margin的重叠等。 Zoom的使用方法: ...

Global site tag (gtag.js) - Google Analytics