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

【问题标题】：Jquery Ui Sortable showing broken image in IE8Jquery Ui Sortable 在 IE8 中显示损坏的图像
【发布时间】：2009-05-02 17:11:21
【问题描述】：

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

visibility : hidden;

我试过设置

content : url(transparent.gif);

似乎都没有任何效果。我能做些什么来解决这个问题？关于如何检查显示的 CSS 的任何建议，如在 Dom Explorer 中（或在 IE8 开发人员工具中调用的任何内容）我看不到 img，因为只要我放开鼠标，它就会消失并且 Dom Explorer 似乎不像 Firebug 那样实时更新。

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

我过度简化了我的示例，另一个问题是整个选项卡是可滚动的，由滑块控制。改变

display : inline;

到

float : left;

不起作用，因为我们不再有可滚动的项目列表。同样出于某种奇怪的原因，当有滚动条并且您使用“li”而不是“img”作为目标时，可排序停止工作。

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

【问题讨论】：

标签： jquery css jquery-ui internet-explorer-8

【解决方案1】：

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

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

不要设置占位符选项或

将您的 .showPlace 类更改为类似

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

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

顺便说一句。在我的测试用例中，将 visibility: hidden 设置为 .showPlace 也很有效

【讨论】：

【解决方案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

【讨论】：

这是一个很棒的工具（jsbin.com），这里是重复的问题：jsbin.com/irozu
是的，jsbin.com 是一个很好的工具，尤其是对于 StackOverflow。唯一的问题是它会删除 30 天内未访问过的代码，因此在您的 cmets 中包含代码和/或演示描述以供将来使用通常是个好主意。
一旦我解决了这个问题，我会将代码包含在问题中以供后代使用。顺便说一句，我已将示例中的所有 javascript 移至 HTML 部分，只是为了在将其添加到问题时清晰。

【解决方案3】：

我修复了它并减少了相当多的代码。

主要问题是您设置的是可排序的 DIV 而不是 UL

似乎按照您想要的方式工作：http://jsbin.com/egiwu

【讨论】：

之所以有效，是因为您删除了 sortable 中的占位符选项，而不是因为从 DIV 更改为 UL。见jsbin.com/uxufe。

【解决方案4】：

你可以试试：display: none;。

【讨论】：

我想要显示空间，而不是 borken img 容器。 display: none 将摆脱空间。

【解决方案5】：

这是另一种解决方法：

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

换句话说，设置一个启动事件处理程序，它设置占位符 img 的 'src' 属性，一旦事情开始。

【讨论】：