Сортируемый пользовательский интерфейс Jquery, показывающий поврежденное изображение в IE8

Question

У меня есть сортируемая по запросу коллекция изображений, т.е.для элементов установлено значение img (из-за того, что оно находится в элементе управления tab и представляет собой горизонтальный список, его нельзя отсортировать по элементам списка, я просто не могу заставить его работать), который отлично работает везде, кроме IE8 (даже в режиме соответствия стандартам), где заполнитель показывает поврежденное изображение.Есть ли какие-либо настройки CSS, которые я могу использовать, чтобы сделать заполнитель невидимым в IE8.Я пытался

visibility : hidden;

Я попробовал установить

content : url(transparent.gif);

ни то, ни другое, по-видимому, не возымело никакого эффекта.Что я могу сделать, чтобы исправить это?Любые предложения о том, как я могу даже изучить, какой CSS отображается, как в Dom Explorer (или как там он называется в инструментах разработчика IE8) Я не могу видеть изображение, потому что, как только я отпускаю мышь, оно исчезает, и Dom Explorer, похоже, не выполняет обновление в реальном времени, как это делает Firebug.

Редактировать:Вот дублированный пробельм http://jsbin.com/irozu

Я слишком упростил свой пример, другая проблема заключается в том, что вся вкладка прокручивается и управляется ползунком.Меняющийся

display : inline;

Для

float : left;

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

Обновленный пример находится по адресу: http://jsbin.com/ahawi.

Answer 1

где заполнитель показывает разбитое изображение.Есть ли какие-либо настройки CSS, которые я могу использовать, чтобы сделать заполнитель невидимым в IE8.Я пытался

поврежденное изображение появляется потому, что jQuery UI создает (в вашем случае) элемент IMG без атрибута src, установленного для заполнителя.Чтобы решить эту проблему:

1. не устанавливайте параметр-заполнитель или

2. измените свой класс .showPlace на что-то вроде

   .showPlace {
      margin: 20px;
      overflow: hidden;
      width: 0; height: 0;
   }
   

приведенный выше код скроет (несуществующее) содержимое изображения, но оставит элемент видимым.

Кстати.в моем тестовом примере настройка visibility: hidden Для .showPlace тоже хорошо сработало

Answer 2

Если вы не хотите показывать заполнитель, убедитесь, что вы не делайте этого установите параметры сортировки placeholder вариант.

Я не вижу проблем с сортируемым поведением по умолчанию в IE8.Я попытался воссоздать то, что вы описали в этом размещенном примере: http://jsbin.com/osobu (Сортируемые изображения находятся на третьей вкладке.)

Было бы полезно, если бы вы предоставили больше кода или просто отредактировали образец, который я предоставил (через http://jsbin.com/osobu/edit) для того, чтобы дублировать проблему.

Редактировать

В ответ на ваш комментарий вы можете просто установить items возможность "li" и проблема устранена.Кроме того, я должен вам использовать

#images li { float: left; }

вместо того, чтобы

#images li { display: inline: }

в противном случае изображение будет смещено при его перетаскивании.

Вот исправленная демо-версия: http://jsbin.com/osezu

Answer 3

Я исправил это и немного уменьшил код.

Основная проблема заключалась в том, что вы настраивали сортировку DIV, а не UL

Кажется, работает так, как вы этого хотите: http://jsbin.com/egiwu

Answer 4

Вы можете попробовать: display: none; .

Answer 5

Вот еще один обходной путь:

$('.mysortthings').sortable({
  start: function(event,ui) {
        $('.ui-sortable-placeholder').each( function() {
           this.setAttribute('src','/ico/unipixel.gif'); } );
       }
});

Другими словами, установите обработчик события запуска, который устанавливает атрибут src заполнителя img, как только все начнется.