跨浏览器 CSS 缩放的完整样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13393588/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
complete styles for cross browser CSS zoom
提问by Hello World
I am finding it hard to get fully cross browser CSS zoom properties ..what I've is only these
我发现很难获得完全跨浏览器的 CSS 缩放属性……我只有这些
zoom: 2;
-moz-transform: scale(2);
回答by Mr. Alien
These will be sufficient for cross browser...
这些对于跨浏览器来说就足够了......
Note: As @martinpointed out that this may not work as intended, doesn't mean this fails, Chrome just makes it 2x larger than other browsers, because it RESPECTS
zoomproperty as well. So it makes it 2x larger...
注意：正如@martin指出的那样，这可能无法按预期工作，并不意味着这会失败，Chrome 只是使它比其他浏览器大 2 倍，因为它也具有 RESPECTS
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
HTML
<div class="zoom">BlahBlah</div>
CSS
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 */
}
回答by aWebDeveloper
Here is a css only solution
这是一个 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;
}
Change HTML tag to
将 HTML 标记更改为
<!--[if lte IE 8]> <html class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
回答by Andrew Urquhart
If scripting is feasible then you can avoid both the collision of multiple supported zoom properties and the browser sniffing by using future-proof feature detection.
Note:I'm using jQuery here for convenience, but it could be written without it.
如果脚本是可行的，那么您可以通过使用面向未来的功能检测来避免多个受支持的缩放属性的冲突和浏览器嗅探。
注意：为了方便起见，我在这里使用 jQuery，但也可以不用它来编写。
CSS:
CSS：
.zoom {
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
}
HTML:
HTML：
<div class="mySelectorClass">Foobar</div>
Script (One-Off Initialisation)
脚本（一次性初始化）
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;
}
})
Then when zooming is required simply invoke:
然后当需要缩放时，只需调用：
var intZoom = 2.5; // NB: This could be calculated depending on window dimensions
$(".mySelectorClass")
.css(
strPropZoom
,(blnPropZoomUseScale ? "scale(" + intZoom + ")" : intZoom)
)
.addClass("zoom");
回答by dgo
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:
为了回应@martin 的上述评论（他是对的），我使用 javascript（包括一些 jQuery）和一些@Mr. 创建了一个复杂的解决方法。外星人的css。毫无疑问，还有其他方法可以实现这一点 - 也许更简单，但是，以下 js 和 css 组合对我有用：
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
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 hereand the Chrome version detection snippet came from this post.
回答by Leo
Seems like the answer today is
看来今天的答案是
.zoom {
zoom: 2; /* Chrome */
transform: scale(2); /* FF, neglected by Chrome */
transform-origin: 0;
}
That is a clinch. ;-)
那是一个成功。;-)
