CSS转换规模在IE中不起作用

Question

我正在使用Jquery和CSS进行缩放图像：

$('#Site img').css({
        zoom: CurrentZoom,
        '-ms-transform': 'scale(' + CurrentZoom + ')',
        '-moz-transform': 'scale(' + CurrentZoom + ')',
        '-o-transform': 'scale(' + CurrentZoom + ')'        
    });
    $('#Site canvas').css({
        zoom: CurrentZoom,
        '-ms-transform': 'scale(' + CurrentZoom + ')',
        '-moz-transform': 'scale(' + CurrentZoom + ')',
        '-o-transform': 'scale(' + CurrentZoom + ')'
    });

但除了 IE 以外，所有浏览器都能正常运行。

Answer 1

根据msdn，为了确保最大兼容性，首选包括transform和-ms-transform。

这仅适用于IE9 +

对于 IE8＆lt; ，请检查Matrix filter。

Answer 2

您可以检查caniuse.com在不同浏览器和版本中的兼容性。

Answer 3

我的猜测是，在IE9中，它同时接受zoom和-ms-transform，并且它们以意想不到的方式进行交互。

因此，我的建议是仅在IE8或更早版本中激活zoom样式，并让IE9仅使用-ms-transform。

您可能需要使用Modernizr之类的工具来确定是使用zoom还是transform。 （我不想提及它，但浏览器检测也会在这里发挥作用，因为我们确切地知道哪些浏览器可以被定位）

值得一提的是，如果您使用的是最新版本的jQuery，则在jQuery代码中设置样式时不需要指定供应商前缀;它会为你添加它们，所以不需要所有重复的代码。

值得指出的是，zoom样式与transform:scale不同。它的工作方式不同，并不总是提供相同的结果，特别是与其周围的其他元素有关。

我猜你已经在IE8上测试了它，你对结果很满意，但如果没有，请确保你测试它并且你对结果感到满意。如果它不能按照你想要的方式工作，可能会有一个完全放弃IE8支持你的页面的情况，这意味着你根本不需要zoom样式，这反过来意味着你不需要担心与transform发生任何可能的冲突，因此无需执行上述任何操作。