Why can't I set -ms-transform with jQuery?
This is the code for my entire page. The div is rotated in Firefox (as expected), but not in I开发者_高级运维E9. Setting the -ms-transform property using normal CSS makes the div rotate, so the problem seems to stem from the attempt to set the property using jQuery. Does anyone know what's going on?
<!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>
It might be easier to use a CSS Class for this:
.rotated {
-ms-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
}
------
jQuery(function ($) {
$('#divid').addClass('rotated');
});
Actually, you can! :-)
$('#divid').css({ msTransform: 'rotate(-90deg)' }); // for IE9
Very relevant IE9: Why setting "-ms-transform" works from css, but not with jquery.css()
This might be relevant: http://bugs.jquery.com/ticket/8346
The one reporting it got around with using jQuery.cssHooks:
jQuery.cssHooks["MsTransform"] = {
set: function( elem, value ) {
elem.style.msTransform = value;
}
};
$("#divid").css("MsTransform", "rotate(-90deg)");
加载中,请稍侯......
精彩评论