开发者

jQuery ignores non-mozilla CSS3 transforms when using Firefox

I am trying to add CSS3 transforms to an element using jQuery. I am using Firefox 5 to test my code. My goal is to maximize browser compatibility by adding multiple versions of the transition for different browsers. Here is the code I'm using:

$('#element_name').css('-webkit-transform', 'rotate(45deg)');
$('#element_name').css('-moz-transform', 'rotate(45deg)');
$('#element_name').css('transform', 'rotate(45deg)');

When I view the resultant HTML using Firebug, I observe that only the -moz-transform has been added to the inline CSS for the element. This CSS works fine in Firefox, but I need the other lines added as well. I'm assuming that if I view the page in Safari it will display the -webkit-transform line, but that's not good enough for my project requirements. I need all of the different CSS tra开发者_运维百科nsform lines to be added at the same time regardless of the browser.

Is there some way I can force jQuery to use them all? Perhaps there's some sort of configuration setting to tell jQuery not to care about the current browser?


This is not caused by jQuery. jQuery makes no pre-check if a property is available in a browser.

Firebug will not show you the unknown properties, because the browser will not apply them when they are unknown. It's a kind of invalid assignment without triggering an error.

Assigning of invalid css-properties may only cause a warning in firebugs console, you can choose to show them by selecting the "show CSS-errors"-option from the console-menu).


What version of Firefox are you using? Did you try to temporary remove the -moz-transform declaration and see what happens?
I'm not sure, but sometimes firebug shows only the first useful declaration.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜