CSS CSS3 变换:在 IE 中缩放
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/7805870/
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
CSS3 transform:scale in IE
提问by Vinzcent
I would like to use the CSS3 property transform:scale.
我想使用 CSS3 属性 transform:scale。
div
{
transform: scale(0.5,0.5);
}
Is there a way to imitate this in Internet Explorer 8 and lower?
May be something with filter
or a Javascript solution?
有没有办法在 Internet Explorer 8 及更低版本中模仿这一点?可能是带有filter
或 Javascript 解决方案的东西?
I've searched the web without any result.
我在网上搜索过,没有任何结果。
Thanks a lot, Vincent
非常感谢,文森特
回答by Pedram Behroozi
IE9 supports transform:
IE9 支持转换:
-ms-transform: scale(0.5,0.5);
For other versions of IE, there's a complex syntax. Something like this:
对于其他版本的 IE,有一个复杂的语法。像这样的东西:
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
M11=1.5320888862379554, M12=-1.2855752193730787,
M21=1.2855752193730796, M22=1.5320888862379558);
Look herefor more info.
看看这里获取更多信息。
回答by Spudley
No, IE8 and earlier do not support the standard transform
style. IE9 does support it though.
不,IE8 及更早版本不支持标准transform
样式。IE9 确实支持它。
There are solutions you could try using the filter
style, but they will be messy.
您可以尝试使用该filter
样式的解决方案,但它们会很麻烦。
But for the simple case that you're describing in the question (basically a simple scaling down), you could use the IE-proprietary zoom
property.
但是对于您在问题中描述的简单情况(基本上是简单的缩小),您可以使用 IE 专有zoom
属性。
Since it's non-standard, the most common use of zoom
is withzoom:1
, which is used to fix a number of IE's layout glitches (particlarly in IE6 and IE7). But it does also do actual zooming as well, and you can use zoom:0.5
to achieve the effect you're looking for.
由于它是非标准的,最常见的用法zoom
是 with zoom:1
,它用于修复许多 IE 的布局故障(尤其是在 IE6 和 IE7 中)。但它也确实进行了实际缩放,您可以使用它zoom:0.5
来实现您正在寻找的效果。
The good thing about using zoom
is that it is works in IE like any other normal CSS property (the filter
alternative has some serious rendering quirks that you need to know about).
使用的好处zoom
是它可以像任何其他普通 CSS 属性一样在 IE 中工作(filter
替代方法有一些您需要了解的严重渲染怪癖)。
The only down-side of using zoom
is that you'd need to disable it in IE9 or later, otherwise it'll interract with your transform
style and have some unwanted effects. I'm not one to generally support the use of CSS hacks, but you could use the /9
hack (documented here) to make it only affect IE8 and earlier, meaning you can specify both the transform
and the zoom
in the same stylesheet, like so:
使用的唯一缺点zoom
是您需要在 IE9 或更高版本中禁用它,否则它会与您的transform
风格交互并产生一些不需要的效果。我不是一个普遍支持使用 CSS hacks 的人,但您可以使用/9
hack(此处记录)使其仅影响 IE8 及更早版本,这意味着您可以在同一样式表中同时指定 thetransform
和 the zoom
,如下所示:
div {
transform: scale(0.5,0.5);
zoom: 0.5;
}
Otherwise you'd need to use conditional comments to determine whether to use it.
否则,您需要使用条件注释来确定是否使用它。
Obviously if you want to do anything more complex than a simple proportional scale, then zoom
won't be suitable, but for a simple case like the one in your question it will be perfect.
显然,如果您想做比简单比例尺更复杂的任何事情,那么zoom
将不合适,但是对于像您问题中的那个简单案例,它将是完美的。
回答by 4esn0k
http://msdn.microsoft.com/en-us/library/ms533014(v=vs.85).aspx
http://msdn.microsoft.com/en-us/library/ms533014(v=vs.85).aspx
although, filters in IE isn't easy to use and they are not always combined with other css effects....
不过,IE 中的过滤器并不容易使用,而且它们并不总是与其他 css 效果相结合......
but IE 9 support scale https://developer.mozilla.org/en/CSS/transform
但 IE 9 支持规模 https://developer.mozilla.org/en/CSS/transform