Полные стили для кросс-браузера.

Мне трудно получить полностью кросс-браузерные свойства CSS-масштабирования. Что я имею в виду только эти

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

Ответ 1

Этого будет достаточно для перекрестного браузера...

Демо

Примечание. Поскольку @martin указал, что это может не работать как предназначенный, не означает, что это не удается, Chrome просто делает его 2x большим чем другие браузеры, потому что он также ОТВЕТИТ 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 */
}

Ответ 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]-->

Ответ 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>

Script (однократная инициализация)

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");

Ответ 4

В ответ на вышеупомянутый комментарий @martin (он прав) я создал сложное обходное решение с использованием 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 - этот пост.

Ответ 5

Кажется, что сегодня ответ:

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

Это клинч.; -)