[英]CSS3 transform:scale in IE
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? 有没有办法在Internet Explorer 8和更低版本中模仿这个? May be something with filter
or a Javascript solution? 可能是filter
或Javascript解决方案的东西?
I've searched the web without any result. 我没有任何结果在网上搜索过。
Thanks a lot, Vincent 非常感谢,文森特
IE9 supports transform: IE9支持转换:
-ms-transform: scale(0.5,0.5);
For other versions of IE, there's a complex syntax. 对于IE的其他版本,有一个复杂的语法。 Something like this: 像这样的东西:
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
M11=1.5320888862379554, M12=-1.2855752193730787,
M21=1.2855752193730796, M22=1.5320888862379558);
No, IE8 and earlier do not support the standard transform
style. 不,IE8及更早版本不支持标准transform
风格。 IE9 does support it though. 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 with zoom:1
, which is used to fix a number of IE's layout glitches (particlarly in IE6 and IE7). 由于它是非标准的, zoom
的最常见用途是使用zoom:1
,用于修复IE的布局故障(特别是在IE6和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: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
的好处是它在IE中可以像任何其他普通的CSS属性一样工作( 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. 使用zoom
的唯一zoom
是你需要在IE9或更高版本中禁用它,否则它会与你的transform
风格相互影响并产生一些不必要的效果。 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: 我不是一般支持使用CSS hacks的人,但你可以使用/9
hack( 此处记录 )使其仅影响IE8及更早版本,这意味着您可以在同一样式表中指定transform
和zoom
,像这样:
div {
transform: scale(0.5,0.5);
zoom: 0.5\9;
}
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
将不合适,但对于像你问题中那样简单的情况,这将是完美的。
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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.