CSS3变换：在IE中缩放

Question

我想使用CSS3属性transform:scale。

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

有没有办法在Internet Explorer 8及更低版本中模仿这个效果？
可能是使用filter或JavaScript解决方案吗？

我在网上搜了一下，但没有找到任何结果。

非常感谢，Vincent

- Vinzcent

---

请在提问时说明您所指的IE版本，因为它会对答案产生很大影响。 - Spudley

Answer 1

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

点击这里获取更多信息。

- Pedram Behroozi

---

您也可以尝试使用 CSS3 转换矩阵转换器，将转换结果转换为 IE 格式。 - thirdender

对于IE9，-ms-transform: scale(0.5);应该足够实现恒定缩放。 - Kozuch

Answer 2

不支持标准的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 就不适用了，但对于类似于您问题中的简单情况，它将是完美的。

- Spudley

---

谢谢你有趣的回复。不幸的是，缩放似乎只适用于文本，而不是我 div 元素的尺寸。 - Vinzcent

是的，我猜这取决于你实际需要实现什么，zoom是否合适。 - Spudley

感谢/9 hack提示。我在IE9和10中遇到了一些奇怪的行为，因为我在同样的样式中缩放以覆盖IE8。 - dex3703

+1. 希望这不会干扰 Chrome 或 Firefox 在指定 IE hack 上的使用。 - Saksham

Answer 3

http://msdn.microsoft.com/en-us/library/ms533014(v=vs.85).aspx

虽然，在IE中使用过滤器并不容易，而且它们并不总是与其他CSS效果结合使用...

但是，IE 9支持缩放https://developer.mozilla.org/en/CSS/transform

- 4esn0k

Answer 4

试试这个： https://github.com/pbakaus/transformie

- Asinox