我想使用CSS3属性transform:scale。
div
{
transform: scale(0.5,0.5);
}
有没有办法在Internet Explorer 8及更低版本中模仿这个效果?
可能是使用filter
或JavaScript解决方案吗?
我在网上搜了一下,但没有找到任何结果。
非常感谢,Vincent
我想使用CSS3属性transform:scale。
div
{
transform: scale(0.5,0.5);
}
有没有办法在Internet Explorer 8及更低版本中模仿这个效果?
可能是使用filter
或JavaScript解决方案吗?
我在网上搜了一下,但没有找到任何结果。
非常感谢,Vincent
IE9支持transform:
-ms-transform: scale(0.5,0.5);
对于其他版本的IE,语法比较复杂。类似于这样:
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
M11=1.5320888862379554, M12=-1.2855752193730787,
M21=1.2855752193730796, M22=1.5320888862379558);
点击这里获取更多信息。
不支持标准的transform
样式,因此IE8及更早版本不支持。但是,IE9支持它。
虽然有解决方案可以尝试使用filter
样式,但这些方法会很复杂。
但对于你在问题中描述的简单情况(基本上是简单的缩放),你可以使用IE专有的zoom
属性。
由于它是非标准的,zoom
通常的用法是使用zoom:1
来修复IE的一些布局问题(特别是在IE6和IE7中)。但它也确实可以进行缩放,并且您可以使用zoom:0.5
来实现您想要的效果。
使用zoom
的好处是它像任何其他正常的CSS属性一样在IE中工作(filter
替代方法存在一些严重的渲染怪异问题需要注意)。
使用zoom
的唯一缺点是您需要在IE9或更高版本中禁用它,否则它会与transform
样式相互作用并产生一些不需要的效果。尽管我通常不支持使用CSS hack,但您可以使用/9
hack(在此文档中记录),使其仅影响IE8及更早版本,这意味着您可以在同一样式表中指定transform
和zoom
:
div {
transform: scale(0.5,0.5);
zoom: 0.5\9;
}
否则,您需要使用条件注释来确定是否使用它。zoom
就不适用了,但对于类似于您问题中的简单情况,它将是完美的。zoom
是否合适。 - Spudleyhttp://msdn.microsoft.com/en-us/library/ms533014(v=vs.85).aspx
虽然,在IE中使用过滤器并不容易,而且它们并不总是与其他CSS效果结合使用...