完整的样式跨浏览器CSS放大(complete styles for cross browser C

2019-06-21 03:49发布

站内文章 / 后端开发
13 0 0

我发现它很难得到..what我已经完全跨浏览器的CSS属性变焦只有这些

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

Answer 1:

这将是足够的跨浏览器...

演示

注：由于@马丁指出， 由于预期这可能无法正常工作 ，并不意味着失败，浏览器只是使它2倍比其他浏览器更大，因为它尊重zoom性能为好。 因此，它使得2倍大... 

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 */
}


Answer 2:

这里是一个CSS唯一的解决办法

.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]-->


Answer 3:

如果脚本是可行的，那么你就可以避免多，支持的变焦性能的同时碰撞和浏览器通过使用面向未来的特征检测嗅探。
注：我在这里使用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");


Answer 4:

响应于由@马丁以上评论（他是正确的），我创建使用JavaScript（包括一些jQuery的）复杂的解决方法和一些@Mr的。 Alien的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版本检测片段是从哪里来的这个职位 。



Answer 5:

似乎是一种解决今天

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

这是一个再胜。 ;-)



文章来源: complete styles for cross browser CSS zoom
标签： css css3 cross-browser zoom
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~