为跨浏览器CSS缩放完整样式

我发现很难得到完全跨浏览器CSS缩放属性..我只是这些

zoom: 2; -moz-transform: scale(2); 

5 Solutions collect form web for “为跨浏览器CSS缩放完整样式”

这些将足以跨浏览器…

演示

注意:正如@马丁指出, 这可能无法按预期工作 ,并不意味着这失败,Chrome只是使其比其他浏览器大2 zoom ,因为它RESPECTS zoom属性以及。 所以它变大了两倍

 zoom: 2; /* IE */ -moz-transform: scale(2); /* Firefox */ -moz-transform-origin: 0 0; -o-transform: scale(2); /* Opera */ -o-transform-origin: 0 0; -webkit-transform: scale(2); /* Safari And Chrome */ -webkit-transform-origin: 0 0; transform: scale(2); /* Standard Property */ transform-origin: 0 0; /* Standard Property */ 

HTML

 <div class="zoom">BlahBlah</div> 

CSS

 .zoom { zoom: 2; -moz-transform: scale(2); -moz-transform-origin: 0 0; -o-transform: scale(2); -o-transform-origin: 0 0; -webkit-transform: scale(2); -webkit-transform-origin: 0 0; transform: scale(2); /* Standard Property */ transform-origin: 0 0; /* Standard Property */ } 

这是一个唯一的解决scheme

 .csszoom{ -ms-transform: scale(1.5); /* IE 9 */ -ms-transform-origin: 0 0; -moz-transform: scale(1.5); /* Firefox */ -moz-transform-origin: 0 0; -o-transform: scale(1.5); /* Opera */ -o-transform-origin: 0 0; -webkit-transform: scale(1.5); /* Safari And Chrome */ -webkit-transform-origin: 0 0; transform: scale(1.5); /* Standard Property */ transform-origin: 0 0; /* Standard Property */ } .ie8 .csszoom{ zoom:1.5; } 

将HTML标记更改为

 <!--[if lte IE 8]> <html class="ie8"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> 

如果脚本是可行的,那么可以通过使用面向未来的function检测来避免多个支持的缩放属性的碰撞和浏览器嗅探。
注意:为了方便起见,我在这里使用了jQuery,但是如果没有它,可能会写入。

CSS:

 .zoom { -moz-transform-origin: 0 0; -o-transform-origin: 0 0; -webkit-transform-origin: 0 0; } 

HTML:

 <div class="mySelectorClass">Foobar</div> 

脚本(一次性初始化)

 var strPropZoom = "zoom"; var blnPropZoomUseScale = false; $(function() { var jqBody = $("body"); // Determine the supported 'zoom' method switch (true) { case Boolean(jqBody.css("zoom")) : break; case Boolean(jqBody.css("-moz-transform")) : strPropNameZoom = "-moz-transform"; blnPropZoomUseScale = true; break; case Boolean(jqBody.css("-o-transform")) : strPropNameZoom = "-o-transform"; blnPropZoomUseScale = true; break; case Boolean(jqBody.css("-webkit-transform")) : strPropNameZoom = "-webkit-transform"; blnPropZoomUseScale = true; break; } }) 

然后,当需要缩放时,只需调用:

 var intZoom = 2.5; // NB: This could be calculated depending on window dimensions $(".mySelectorClass") .css( strPropZoom ,(blnPropZoomUseScale ? "scale(" + intZoom + ")" : intZoom) ) .addClass("zoom"); 

为了回应@martin的上述评论(他是正确的),我创build了一个使用javascript(包括一些jQuery)和一些@Mr的复杂的解决方法。 外星人的CSS。 毫无疑问,还有其他方法可以实现这一点 – 也许更简单,但是,下面的js和css组合适用于我:

CSS

 .zoom{ -moz-transform: scale(2); /* Firefox */ -moz-transform-origin: 0 0; -o-transform: scale(2); /* Opera */ -o-transform-origin: 0 0; zoom:2 /*IE*/; } //Notice the absence of any Webkit Transforms 

JavaScript的

 (function($){ var version=false, isSafari=Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0, isOpera=!!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0, isChrome=!!window.chrome && !isOpera; if(isChrome){ version=(window.navigator.appVersion.match(/Chrome\/(\d+)\./)!==null) ? parseInt(window.navigator.appVersion.match(/Chrome\/(\d+)\./)[1], 10) : 0; version=(version >= 10) ? true : false; // Don't know what version they switched it. Figured that this was a good guess } // I added the extra ternary check in there because when testing in Chrome, // if I switched the user agent in the overrides section, it kept failing with // null value for version. if(isSafari || version){ $('.zoom').css('-webkit-transform','scale(2)'); $('.zoom').css('-webkit-transform-origin','0 0'); // If Scaling based upon different resolutions, a check could be included here // for window size, and the css could be adjusted accordingly. } }(jQuery)) 

浏览器检测代码来自这里 ,Chrome版本检测片段来自这篇文章 。

似乎今天的答案是

 .zoom { zoom: 2; /* Chrome */ transform: scale(2); /* FF, neglected by Chrome */ transform-origin: 0; } 

这是一个成功的例子。 😉

  • select器是做什么的?
  • 为什么我的CSS3媒体查询不适用于移动设备?
  • 什么更快? CSS3过渡或jQueryanimation?
  • jQuery的点击事件不能在iOS中工作
  • 如何在CSS中绘制一个圆圈?
  • Chrome中的CSS3转换旋转造成1px的偏移
  • 删除twitter引导行中的行
  • Google Chrome中是否有“字体平滑”?
  • 为什么IE9在我的网站上切换到兼容模式?
  • 在边框内放置边框,而不是边框
  • CSS边框半径不会裁剪Webkit上的图像