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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 01:54:46  来源:igfitidea点击:

CSS3 transform:scale in IE

internet-explorercssscale

提问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 filteror 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 transformstyle. IE9 does support it though.

不,IE8 及更早版本不支持标准transform样式。IE9 确实支持它。

There are solutions you could try using the filterstyle, 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 zoomproperty.

但是对于您在问题中描述的简单情况(基本上是简单的缩小),您可以使用 IE 专有zoom属性。

Since it's non-standard, the most common use of zoomis 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.5to achieve the effect you're looking for.

由于它是非标准的,最常见的用法zoom是 with zoom:1,它用于修复许多 IE 的布局故障(尤其是在 IE6 和 IE7 中)。但它也确实进行了实际缩放,您可以使用它zoom:0.5来实现您正在寻找的效果。

The good thing about using zoomis that it is works in IE like any other normal CSS property (the filteralternative has some serious rendering quirks that you need to know about).

使用的好处zoom是它可以像任何其他普通 CSS 属性一样在 IE 中工作(filter替代方法有一些您需要了解的严重渲染怪癖)。

The only down-side of using zoomis that you'd need to disable it in IE9 or later, otherwise it'll interract with your transformstyle and have some unwanted effects. I'm not one to generally support the use of CSS hacks, but you could use the /9hack (documented here) to make it only affect IE8 and earlier, meaning you can specify both the transformand the zoomin the same stylesheet, like so:

使用的唯一缺点zoom是您需要在 IE9 或更高版本中禁用它,否则它会与您的transform风格交互并产生一些不需要的效果。我不是一个普遍支持使用 CSS hacks 的人,但您可以使用/9hack(此处记录)使其仅影响 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 zoomwon'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