ie8支持html5zoo,complete styles for cross browser CSS zoom

In response to the above comment by @martin (he is correct), I created a complicated workaround using javascript (includes some jQuery) and some of @Mr. Alien's css. Unquestionably, there are other ways to accomplish this - perhaps simpler, but, the following js and css combo works for me:

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

The browser detection code came from here and the Chrome version detection snippet came from this post.