當使用Firefox時，jQuery忽略非mozilla CSS3變換

我想將CSS3變換添加到使用jQuery的元素。我正在使用Firefox 5來測試我的代碼。我的目標是通過爲不同瀏覽器添加多個版本的轉換來最大化瀏覽器兼容性。下面是我使用的代碼：當使用Firefox時，jQuery忽略非mozilla CSS3變換

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

當我查看使用螢火蟲產生的HTML，我觀察到，只有-moz-變換已經被添加到內聯CSS的元素。這個CSS在Firefox中工作正常，但我還需要添加其他行。我假設，如果我在Safari中查看頁面，它將顯示-webkit-transform行，但這不足以滿足我的項目需求。無論瀏覽器如何，我都需要同時添加所有不同的CSS變換行。

有沒有什麼辦法可以強制jQuery使用它們？也許有一些配置設置來告訴jQuery不要關心當前的瀏覽器？

來源

2011-07-22 JGDev

爲什麼你需要在你的FireFox瀏覽器中使用-webkit版本？ – PeeHaa

您使用的是哪個版本的Firefox？您是否嘗試臨時移除-moz-transform聲明並查看會發生什麼？
我不確定，但有時螢火蟲只顯示第一個有用的聲明。

來源

2011-07-22 08:35:14 pasine

我使用的是Firefox 5，當我沒有設置-moz-transform屬性時，Firebug在元素的css中沒有顯示任何內容。 – JGDev

我真的不明白這一點。 Firebug只顯示支持的css指令。你設置了3個屬性，每個瀏覽器只支持其中的一個（Firefox只支持-moz-transform，而Safari和Chrome -webkit-transform）。大多數瀏覽器仍然不支持CSS3轉換（不知道關於Safari 5.1，自從昨天發佈以來）。看看這個實時編輯器http://www.westciv.com/tools/transforms/，你會發現轉換的元素根據瀏覽器有不同的css指令。 – pasine

這不是由jQuery引起的。如果一個屬性在瀏覽器中可用，jQuery不會預先檢查。

Firebug不會向您顯示未知屬性，因爲瀏覽器在未知時不會應用它們。這是一種無效的賦值，不會觸發錯誤。

指定無效的css屬性可能只會在firebugs控制檯中引發警告，您可以選擇通過從控制檯菜單中選擇「show CSS-errors」選項來顯示它們。

來源

2011-07-22 08:39:07

如上設置css屬性後，我接着檢查是否設置了-webkit-transform：if（$（'＃element_name'）.css（' - webkit-transform'））。此檢查始終爲false，但檢查-moz-transform返回true。因此，就jQuery而言，只有-moz-transform css屬性正在設置。 – JGDev

此外，當我刪除添加-moz-transform css的代碼時，Firebug顯示沒有將css添加到該元素。甚至不是通用屬性。我並不期望-webkit-transform屬性能夠在Firefox中實際執行任何操作，但我仍然期望它顯示出來。 – JGDev

再一次：這不是一個jQuery問題，它是由螢火蟲造成的。檢查小提琴：http://jsfiddle.net/doktormolle/zSVLm/。值被設置並呈現（您可以在元素的DOM選項卡中找到它），但在CSS端忽略。 –

當使用Firefox時，jQuery忽略非mozilla CSS3變換

回答

相關問題