FirefoxのjQueryのUIの位置効果

Question

使用すると、1つの修正だけで、それ自体が固定される必要があると問題になっているかを確認することができますので、これは歴史のビットを必要とします。

は、Firefoxでthis jsFiddleを見てみましょう。ボタンをクリックすると、HTML領域の左上隅にマロンボックスが表示されます。 Chrome、IE、Safariでは、同じjsFiddle内で、チェックボックスが付いたセルがマルーンボックスの表示を取得し、背景にフェードアウトします。これが目的の動作です。

jsコードとcssでは、divがチェックボックスのセルに追加されてからフェードアウトすることに注意してください。これはthis jsFiddleにある問題の解決策であると考えられていました。 jsコードでは、すべてのブラウザで機能するUIハイライトエフェクトを使用しますが、バックグラウンドイメージに行く前に白にフェードすることがわかります。

フェード・トゥー・ホワイト・トゥ・バックグラウンド・イメージの問題に対処するには、以前のjsFiddleはフィックスであるはずでしたが、Firefoxの問題が導入されました。 UIの位置効果を使って修正しようとしても役に立たなかった。

ハイライトエフェクトのように、白にフェードすることなくチェックボックスセルをハイライト表示するブラウザ間の解決策を見つけ出すことができたら、永遠に感謝します。

Answer 1

<div style="position: relative">にあなたの入力をラップし、それはあまりにもFFで動作します。 <td>にposition: relativeがあっても、FFのテーブルの絶対位置が問題になるようです。

ここに変更されたfiddleがあります。

ダイナミックラッピング/アンラップリングのみでjQueryでも可能です。あなたのJSに次のように変更します。ここでは

$('#classesTable input:checkbox').wrap('<div style="position: relative"/>').parent().append('<div class="checkwrap" />'); 

$('#classesTable .checkwrap').fadeOut(1000, function() { 
     $(this).unwrap().remove(); 
}); 

このfiddle

Answer 2

それはノットのFFの問題である - そのあなた。 Tdは相対的な位置に配置することはできません。使用するdiv iside tdの幅position:relative