Question

我有一个查询可排序的图像集合，即。这些项目被设置为img（由于它是在一个标签控件中并且是一个水平列表，不能在列表项目上排序，我只是无法让它工作），除IE8外，它在任何地方都能正常工作（即使在标准合规模式下），占位符显示损坏的图像。是否有任何类型的CSS设置我可以用来使占位符在IE8中不可见。我试过了

visibility : hidden;

我尝试过设置

content : url(transparent.gif);

似乎都没有任何效果。我该怎么做才能解决这个问题？有关我如何甚至可以检查CSS显示内容的任何建议，如在Dom Explorer中（或在IE8开发人员工具中调用的任何内容）我无法看到img，因为只要我放开鼠标它就会消失并且Dom资源管理器似乎没有实时更新Firebug的工作方式。

编辑：这是问题重复的http://jsbin.com/irozu

我简化了我的例子，另一个问题是整个标签是可滚动的，由滑块控制。改变

display : inline;

到

float : left;

不起作用，因为我们不再有可滚动的项目列表。还有一些奇怪的原因，当有一个滚动条并且你使用“li”而不是“img”作为目标时，sortable停止工作。

更新的示例位于：http://jsbin.com/ahawi。

Answer 1

如果您不想显示占位符，请确保不设置可排序的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 2

占位符显示损坏的图片。是否有任何类型的CSS设置我可以用来使占位符在IE8中不可见。我试过了

出现损坏的图像，因为jQuery UI创建（在您的情况下）没有为占位符设置src属性的IMG元素。要解决这个问题：

不要设置占位符选项或

将.showPlace类更改为

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

上面的代码将隐藏（不存在的）图像内容，但会使元素保持可见。

顺便说一句。在我的测试用例中，将visibility: hidden设置为.showPlace也运行良好

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'); } );
       }
});

换句话说，设置一个启动事件处理程序，它会在事情发生时立即设置占位符img的'src'属性。

Jquery Ui Sortable在IE8中显示损坏的图像

5 个答案: