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

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

Answer 2

根据msdn，以保证最大的兼容性，包括transform和-ms-transform是优选的。

这仅适用于IE9 +

对于IE8 <，检查Matrix filter。

Answer 3

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

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

您可能需要使用像Modernizr这样的工具来确定是使用zoom还是transform。 （我不喜欢提及它，但浏览器检测也可以在这里实现，因为我们知道哪些浏览器可以针对）

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

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

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