为什么我不能用 jQuery 设置 -ms-transform？答案

【问题标题】：Why can't I set -ms-transform with jQuery?为什么我不能用 jQuery 设置 -ms-transform？
【发布时间】：2011-06-25 17:31:04
【问题描述】：

这是我整个页面的代码。 div 在 Firefox 中旋转（如预期的那样），但在 IE9 中没有。使用普通 CSS 设置 -ms-transform 属性会使 div 旋转，因此问题似乎源于尝试使用 jQuery 设置属性。有谁知道怎么回事？

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" charset="utf-8" src="/jquery-latest.pack.js"></script>
<script>    
    $(function(){
        $("#divid").css("-ms-transform", "rotate(-90deg)");   // For IE9
        $("#divid").css("-moz-transform", "rotate(-90deg)");  // For Firefox
    });
</script>
</head>
<body>
    <div id="divid">Foo</div>
</body>
</html>

【问题讨论】：

你的文档类型没有损坏吗？你能检查一下这是否是页面的开头。

标签： jquery css

【解决方案1】：

为此使用 CSS 类可能更容易：

.rotated {
    -ms-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
}

------

jQuery(function ($) {
    $('#divid').addClass('rotated');
});

【讨论】：

为了与 webkit 浏览器（Chrome、Safari）兼容，您可以添加“-webkit-transform”
@Bakudan，是的，显然您可以将目标浏览器所需的任何样式添加到 CSS 中。

【解决方案2】：

其实可以！ :-)

$('#divid').css({ msTransform: 'rotate(-90deg)' }); // for IE9

【讨论】：

【解决方案3】：

这可能是相关的：http://bugs.jquery.com/ticket/8346

使用jQuery.cssHooks 报告它的人：

jQuery.cssHooks["MsTransform"] = {
    set: function( elem, value ) {
        elem.style.msTransform = value;
    }
};

$("#divid").css("MsTransform", "rotate(-90deg)");

【讨论】：