JQuery UI Sortable apresentando imagem quebrada no IE8

Question

Eu tenho uma consulta coleção classificáveis ??de imagens, ie. os itens está definido para img (devido ao fato de que está em um controle guia e é uma lista horizontal, não pode ser classificado nos itens da lista, eu não posso obtê-lo para o trabalho), que funciona perfeitamente em todos os lugares, exceto para o IE8 ( mesmo no modo de cumprimento de normas), onde os shows de espaço reservado uma imagem quebrada. Existe algum tipo de CSS configuração eu posso usar para tornar o espaço reservado invisível no IE8. Eu tentei

visibility : hidden;

Eu tentei definindo o

content : url(transparent.gif);

nem parecendo ter qualquer efeito. Oque posso fazer para consertar isso? Todas as sugestões sobre como posso sequer examinar o CSS está sendo mostrado, como em Dom Explorer (ou qualquer que seja o seu chamado nas ferramentas de desenvolvedor do IE8) Eu não posso ver o img porque assim que eu deixei para ir do mouse desaparece e Dom o explorer não parecem fazer tempo real atualizando a maneira Firebug faz.

Edit: Aqui está a probelm duplicado http://jsbin.com/irozu

I mais simplificado meu exemplo, o outro problema é que todo o guia é de rolagem, utilizado pelo controle deslizante. Alterar

display : inline;

para

float : left;

não funciona como nós já não temos uma lista de rolagem de itens. Também por alguma estranha razão, quando há uma barra de rolagem e você usar "li" em vez de "img", como a meta, as paradas classificáveis ??trabalhando.

O exemplo atualizado é em:. http://jsbin.com/ahawi

Answer 1

onde os shows de espaço reservado uma imagem quebrada . Existe algum tipo de CSS configuração eu posso usar para tornar o espaço reservado invisível no IE8. Eu tentei

a imagem quebrada aparece porque jQuery UI cria (no seu caso) um elemento IMG sem set atributo src para um espaço reservado. Para resolver este problema:

1. não definir a opção de espaço reservado ou

2. mudar sua classe .showPlace para algo como

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

O código acima irá esconder o conteúdo da imagem (não-existente), mas vai deixar o elemento visível.

BTW. no meu teste caso, definindo visibility: hidden para .showPlace também funcionou bem

Answer 2

Se você não quiser mostrar um espaço reservado, certifique-se de que você não set do classificáveis ??opção placeholder.

Eu não vejo nenhum problema com o comportamento classificáveis ??padrão no IE8. Tentei recriar o que você descreveu neste exemplo hospedado: http://jsbin.com/osobu ( as imagens classificáveis ??estão na terceira aba).

Seria útil se você tiver fornecido mais de código ou apenas editar o I exemplo fornecido (via http: // jsbin .com / osobu / editar ), a fim de duplicar o problema.

Editar

Em resposta ao seu comentário, você pode apenas definir a opção items para "li" e o problema seja corrigido. Além disso, eu tenho que você usa

#images li { float: left; }

em vez de

#images li { display: inline: }

ou então a imagem será compensado enquanto você está arrastando-o.

Aqui está a demonstração fixo: http://jsbin.com/osezu

Answer 3

Eu fixo-lo e reduziu o código um pouco.

O principal problema foi que você estava definindo o DIV classificáveis ??em vez da UL

parece funcionar do jeito que você quer: http://jsbin.com/egiwu

Answer 4

Você pode tentar:. display: none;

Answer 5

Aqui está uma outra solução alternativa:

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

Em outras palavras, definir um manipulador de evento de início, que define o atributo 'src' do img espaço reservado, assim que as coisas ficam acontecendo.