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

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”作为目标，可分类停止工作。

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

Answer 1

  

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

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

1. 不要设置占位符选项 或

2. 将.showPlace类更改为

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

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

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

Answer 2

如果您不想显示占位符，请确保不设置可排序的占位符选项。

我发现IE8中的默认可排序行为没有问题。我试图重新创建您在此托管示例中描述的内容： http://jsbin.com/osobu （可排序的图像位于第三个选项卡中。）

如果您提供更多代码或仅编辑我提供的样本（通过 http：// jsbin）将会很有帮助.com / osobu / edit ）以复制问题。

修改

在回复您的评论时，您只需将 items 选项设置为＆quot; li＆quot; 即可解决问题。另外，我必须使用

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

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