0

I am doing zooming image using Jquery and 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 + ')'
    });

but it's working fine with all browser except the IE.

4

3 回答 3

1

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

这仅适用于 IE9+

对于IE8<，请检查Matrix filter。

于 2013-03-14T07:45:09.693 回答
0

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

caniuse.com

于 2013-03-14T07:32:27.013 回答
0

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

因此，我的建议是仅zoom在 IE8 或更早版本中启用该样式，并让 IE9 仅与-ms-transform.

您可能需要使用 Modernizr 之类的工具来确定是否使用zoom或transform. （我不想提及它，但浏览器检测在这里也可以解决问题，因为我们确切知道哪些浏览器可以作为目标）

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

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

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

于 2013-03-14T07:52:50.193 回答