CSS3 变换：IE 中的缩放

发布于 2024-12-11 02:50:02 字数 235 浏览 0 评论 0原文

我想使用CSS3属性transform:scale。

div
{
     transform: scale(0.5,0.5);
}

有没有办法在 Internet Explorer 8 及更低版本中模仿这个？可能是带有 filter 或 Javascript 解决方案的东西？

我在网上搜索过，没有任何结果。

非常感谢，文森特

原文

I would like to use the CSS3 property 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?

I've searched the web without any result.

Thanks a lot, Vincent

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

菩提树下叶撕阳。 2024-12-18 02:50:02

IE9 支持转换：

-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);

看这里了解更多信息。

IE9 supports transform:

-ms-transform: scale(0.5,0.5);

For other versions of IE, there's a complex syntax. Something like this:

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
    M11=1.5320888862379554, M12=-1.2855752193730787,
    M21=1.2855752193730796, M22=1.5320888862379558);

Look here for more info.

回复收藏 0 原文

王权女流氓 2024-12-18 02:50:02

不，IE8 及更早版本不支持标准 transform 样式。不过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 将不适合，但对于像您问题中的简单情况，它将是完美的。

No, IE8 and earlier do not support the standard transform style. IE9 does support it though.

There are solutions you could try using the filter style, but they will be messy.

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.

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.

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).

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:

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.

回复收藏 0 原文