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，因此不需要做任何上述。