跨浏览器使用transform:scale CSS属性的方法？

Question

我有以下的CSS规则：

  -webkit-transform: scale(0.5);  /* Saf3.1+, Chrome */
     -moz-transform: scale(0.5);  /* FF3.5+ */
      -ms-transform: scale(0.5);  /* IE9 */
       -o-transform: scale(0.5);  /* Opera 10.5+ */
          transform: scale(0.5);

我打算将其应用于一个div，以便将其大小（包括所有内容、图片等）缩小到原来的50%，同时保持相同的中心点。正如您可能知道的那样，我列出的规则正是这样做的，除了IE7-8。

根据这个网站，微软专有的规则等效于：

   /* IE8+ - must be on one line, unfortunately */ 
   -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.5, M12=0, M21=0, M22=0.5, SizingMethod='auto expand')";

   /* IE6 and 7 */ 
   filter: progid:DXImageTransform.Microsoft.Matrix(
            M11=0.5,
            M12=0,
            M21=0,
            M22=0.5,
            SizingMethod='auto expand');

然而，这些似乎并没有真正调整 div 内容的大小，它只是移动了位置而已。 CSS3Please.com 报告了不同的矩阵值相当于 scale(0.5)：

filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
                     M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');

我也测试了这些方法，但效果都一样；div似乎改变了位置，但其内容的实际大小仍未改变。

最后，我尝试了transformie.js，它会在你分配变换属性时自动通过sylvester.js计算矩阵，但最终结果仍然是：

M11=0.5, M12=0, M21=0, M22=0.5

这和我最初尝试的那个完全一样，似乎除了移动div的位置之外没有其他作用。

我会尝试cssSandpaper.js，但它看起来对于我的意图来说有点臃肿，而且没有jQuery端口，我也不想只为此将cssQuery添加到项目中。结果可能与transformie.js生成的结果相同，因为它似乎也使用sylvester.js。

编辑：我还尝试了this，它似乎直接来自微软，并建议使用以下矩阵计算方法：

function resizeUsingFilters(obj, flMultiplier) {
    // If you don't do this at least once then you will get an error
    obj.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11='1.0', sizingmethod='auto expand')";
    // Resize
    obj.filters.item(0).M11 *= flMultiplier;
    obj.filters.item(0).M12 *= flMultiplier;
    obj.filters.item(0).M21 *= flMultiplier;
    obj.filters.item(0).M22 *= flMultiplier;
}  

不幸的是，这也不能缩放div本身的内容。看起来这可能根本不可能，但是：

如何在IE8-7中模拟现代的transform: scale，以使其实际调整内部div内容的大小？

也许我正在寻找不存在的东西，但我想确保。所有测试都是使用IE9在IE8和IE7的兼容模式下完成的（到目前为止它总是完成了工作，我不认为它不可靠，但如果您认为不同，请随意纠正我）

- Mahn

---

我没有使用过 Modernizr，但从我对它的了解来看，这似乎不是使用案例。那么使用它的意义是什么呢？ - Jared Farrish

支持某些无法支持的东西，例如canvas是一回事。看这里，老兄，请试试Modernizr；如果它能用，那就万事大吉。如果不行，那就当我没说过。;) - Jared Farrish

@JaredFarrish 看到编辑了吗？看起来是的，现代浏览器主要用于检测功能，而不是支持它们；无论如何，我找到了微软关于我正在尝试做的事情的帖子，但那也没有解决问题 :/ - Mahn

@BoltClock - 请解释一下这个注释。 - Jared Farrish

根据 Modernizr 网站的描述，“Modernizr 是一个 JavaScript 库，用于检测用户浏览器中 HTML5 和 CSS3 特性。” 它不支持在非现代浏览器中使用 HTML5 和 CSS3。 - A.M.K

Answer 1

我对你的解释有点困惑。在IE7-8中，这个示例使用你发布的第一组代码可以很好地缩小内部元素（尽管你表明它只是改变位置）。但该代码无法从中心点进行缩放（它是从左上角开始的），而矩阵变换无法容纳平移（它只能“调整、旋转或反转对象的内容”），因此它并没有像你所说的“保持相同的中心”。

我找到了一个类似于你提到的transformie.js的页面来执行变换，但这个页面讲述了变换原点居中的问题。最终，为了获得在中心缩放的外观，您必须包括某种计算来使用position: relative来移动元素。

在这个示例中，我通过在包装div上设置width并根据内部尺寸确定height，使自己很容易手动进行这样的计算。在任何动态调整大小的情况下，这可能会变得复杂，但上面的链接我认为提供了使用JavaScript（JQuery）和sylvester.js动态执行计算的方法。

- ScottS

---

嗯，有趣。确实你的代码能正常工作；我会调查一下为什么我不能在我的页面上让它工作，肯定是我忽略了什么... - Mahn

所以我再次通过jQuery实现了它，虽然对于大量（100个以上）的元素来说速度非常慢，但确实可以工作，我想这就是我第一次认为它不起作用的原因。我仍然必须排除IE7-8，因为我怀疑它无法加速...哦，好吧。 - Mahn

Answer 2

您还可以使用IE的缩放属性：

zoom: 0.5

这样应该能够实现您想要的效果。

- Zoltan Hawryluk

---

我知道缩放功能，但很遗憾它非常缓慢，比大多数浏览器中的transform: scale要慢得多，这就是为什么我很快就放弃了它。不过还是谢谢！ - Mahn