Firefox jQuery UI Эффект положения

Question

Это требует немного истории, чтобы вы могли видеть, как одно исправление превратилось только в проблему, которую нужно исправить:

Взгляните на этот jsFiddle в Firefox .Нажмите на кнопку, и в левом верхнем углу области HTML появится поле цвета бордового цвета.В Chrome, IE и Safari, в одном и том же jsFiddle, ячейка с флажком будет отображаться в бордовом поле, а затем исчезать в фоновом режиме, что и является желаемым поведением.

Примечание в jsкод и CSS, что div добавляется в ячейки флажка, а затем исчезает.Предполагалось, что это решение проблемы, найденной в this jsFiddle .В коде js вы можете видеть, что я использую эффект подсветки пользовательского интерфейса, который работает во всех браузерах, но перед переходом к фоновому изображению выцветает до белого.

Чтобы решить проблему перехода от белого к белому, а затем к проблеме фонового изображенияПрежний jsFiddle должен был быть исправлением, которое только вводило проблему Firefox.И попытка исправить это с помощью эффекта «Положение» пользовательского интерфейса не помогла.

Буду вечно благодарен, если кто-нибудь поможет мне найти кросс-браузерное решение, которое подсвечивает ячейки флажков без выцветания на белый, как выделениеэффект делает.

Answer 1

Оберните ваш ввод в <div style="position: relative">, и он будет работать и в FF.Абсолютное позиционирование в таблицах в FF кажется проблемой, даже если <td> имеет position: relative.

Вот модифицированная скрипка .

Это также возможнотолько с jQuery с динамическим переносом / развёртыванием.Измените ваш JS следующим образом:

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

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

Вот эта скрипка

Answer 2

это не проблема, это ваша. Td нельзя позиционировать относительно. Использовать разделитель ширины и ширины position:relative